Streaming live at 10am (PST)

Saturation filter interaction messes up modal layout

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

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?

Thanks for the assessment!

From my understanding the filter is not applied to a modal’s parent but a sibling though…

In which case it makes even less sense. But I see things working properly right now. Did you manage to fix it?

yes, had to rebuilt the blocks and structure.

you were right with your assumption, it’s a filter thing not a webflow bug.