Webnique
January 30, 2020, 9:04pm
1
I built a team members collection and each member calls a modal on click that displays additional information.
Everything works as it should until I introduce a hover interaction that turns a desaturated background image into saturation.
As soon as that type of interaction is applied to the collection item the modal’s layout all of sudden is messed. No matter how I built (so it seems)
any advice much appreciated.
here is the read only link https://preview.webflow.com/preview/leadx?utm_medium=preview_link&utm_source=designer&utm_content=leadx&preview=b47e847f330ebfef22573c2bfef76d52&pageId=5e330d3d37e5b22e1a713f7d&mode=preview
dram
January 30, 2020, 11:35pm
2
Looks like a bug to be honest. Yes, applying any filter to that modal’s ANY parent will make it stop being fixed. You can see it even without any interactions, just add a filter to any of its parents. I don’t know, maybe that’s how css filters work by design? I mean not just inside Webflow but everywhere?
Webnique
January 31, 2020, 9:08am
3
Thanks for the assessment!
From my understanding the filter is not applied to a modal’s parent but a sibling though…
dram
January 31, 2020, 3:12pm
4
In which case it makes even less sense. But I see things working properly right now. Did you manage to fix it?
Webnique
January 31, 2020, 3:55pm
5
yes, had to rebuilt the blocks and structure.
you were right with your assumption, it’s a filter thing not a webflow bug.
https://stackoverflow.com/questions/52937708/css-filter-on-parent-breaks-child-positioning