Fixed positioning is having a problem when used in dynamic pop-up

Hi guys, I’m using dynamic pop-ups for a project and when I use the pop up in publishing or preview the pop up is not acting as fixed positioning

Here is a screen recording to show the problem

Here is the view-only link of the project

Hi @koushikwebdesignwork !
This one gave me some trouble, but I found what causes the problem.
It is the animation that you set up on your section .Center.Speciality Cards that affect the positioning of the overlay. The Slide animation make an initial transform on the position of your section and the fixed position is affected.
It is actually quite unintuitive as you would think that a fixed element is only dependent on the viewport…

Hope it solves your problem !

Thank you for the reply,

Yeah, it was quite hard to understand what was causing the problem.
So is removing the animation is the only solution?

Removing the animation on the parent yes.
But I think you can still keep a slide in effect on the cards if you remove the div containing the overlay from it.

But then, targeting the good Speciality Pop up when you click on the Learn More button becomes a little more tricky. You would need to add some custom code I believe.

Thank you a lot for your help, Jean.

I have figured that any other animation where the parent element need not be moved will work,
so I switched it to appearing from zero opacity

Thanks again for the help

1 Like