Fixed Position after interaction transform

[jgonzalezmilburn (Joaquin)]

I’m trying to set up multiple pop-ups to display extra information about products features. I am doing this by using click-triggered interactions. The pop-ups are supposed to have a fixed position and to occupy the entire viewport. This displays correctly when i preview the interaction from the interactions menu. Unfortunately it doesn’t once I try it in the published site. Would someone be able to help me with this?

The interaction is “calltoview” and it is triggered when one clicks on a “vermas” element and applied to sibling elements called “funcion-bg”.

Here is my public share link: https://preview.webflow.com/preview/bioserp?preview=bbac361bc4996f565fb7be1a27379b88

[Waldo (Waldo Broodrÿk)]

Hey @jgonzalezmilburn my recommendation would be to rebuild your modal to be display: block, and then add in another div that holds the modal that’s 100% width/height and has the flex settings. Then in your interaction, set that parent modal to display: block instead of flex.

​Please let me know if this is helpful, if not, I’m happy to help further.
​

[jgonzalezmilburn (Joaquin)]

Hi Waldo, thanks for your help. I tried that but the problem persists, the element does not display with a fixed position full after the interaction.

This is how I would like it to display:

This is how it actually displays:

[jgonzalezmilburn (Joaquin)]

Hi Waldo, could you take a look at my post below? Also, I tried following the instructions on the “custom lightbox” tutorial and I have the same problems. Thank you!

[cyberdave (Dave Sloane)]

Hi @jgonzalezmilburn, I have been looking at this further, and for some reason as you mentioned, the fixed div only works when the transformation is turned off on those elements in the design.

I have been doing some checking on this, and there seems to be some history on this related to stacking contexts getting changed after a transformation, see this article here: http://stackoverflow.com/questions/10814178/css-performance-relative-to-translatez0/10814448#10814448

I am not 100% positive this is the issue, I am still doing some testing with this. Just wanted to give you an update.