Safari display=none animation glitch

Design help Animations & Interactions
1

Hi all,

I have built a popup component and created the trigger to switch the popup from display:none to display:flex. Additionally I added an opacity animation so that the popup fades in slowly from 0% to 100%; rather than just abruptly appearing.

My problem:
On safari it seems that whenever I click the trigger for the first time after loading the page, the animation stutters something horrible. Once closed, I can re-trigger the popup and it looks great.

Does anyone have this issue and know how to solve it/have a workaround? On chrome it isn’t an issue.
Also in preview mode on safari the issue isn’t their - so only on safari when published :confused:

https://peclub.webflow.io

https://preview.webflow.com/preview/peclub?utm_medium=preview_link&utm_source=designer&utm_content=peclub&preview=15ca013cd31eafd0206521a0d4646935&pageId=64395c9dd1110cc853d88e28&workflow=preview

Thanks guys!

2

Is it the contact pop up? I’m on Safari and that one works well for me even on the first try. I tried it here too and works well: https://peclub.webflow.io/

3

Super strange :confused: its still choppy for me :frowning: thanks for checking!