Streaming live at 10am (PST)

Fixed Position after interaction transform

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:

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. :smiley:

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

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:

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!

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:

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

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.