Position fixed breaks relative to parent after filter change on parent element

[erikdana]

I’ve had this issue before, a workaround fixed (Position fixed related to parent?) but it’s still a bug IMHO.

As you can see in the screenshot below, a modal div with fixed position is not behaving properly - bad, bad div!

Any thoughts?

---

Here is my site Read-Only: LINK

[cyberdave (Dave S.)]

Hi @erikdana

Thanks for the report, could you please help to share the page this collection list is located and the location of the modal in the navigator?

Normally elements which are positioned fixed are positioned to the Body, and absolute position is used when positioning an element to a parent element having a relative position.

Thanks in advance,
dave

[erikdana]

Hi Dave, thank you for helping out

The section is 3rd to last in the homepage, the modal overlay stays inside the collection items.

My intention is to click the item, then a modal opens and shows more content. The modal overlay has position fixed, I understand that it could be directly at the body, but as I need to open a different modal to each item and reuse the interaction I’m configuring to affect “only children with this class”.

[erikdana]

hi dave, could you help?

[cyberdave (Dave S.)]

Hi @erikdana, thanks for getting back to me. I did take a look at the site and the trouble seems to be related to the hover state filter change in saturation applied to the “item” class.

I would remove the saturation filter on the item class (including the hover change) and instead add that to the foto equipe class.

Then, create a new div under the item class and call it Wrapper Div. Drag the modal overlay, the foto and the Pessoa overlay under the wrapper div.

Next, remove the Mouse tap trigger on the item class and instead assign that to the wrapper div.

You will end up with something like:

I also made a quick video: Screen Recording 2018-08-23...

I hope this helps