Strange bug... and a strange temporary fix: Scroll animations animating twice in Safari only

[threeoten]

I was trying to get an answer over in the main forum about an issue where my scroll animations were animating twice, but in Safari only. See that thread:

https://theme.co/forum/t/scroll-animation-effects-animating-twice

But since they couldn’t help me, I dug in deeper and I found that if you add ANY amount of “delay” in the scroll animation transition settings, even just 1ms, the issue goes away and the element will NOT re-animate after loading once. So if you’re working on a fix for this at all, then I wanted to share my findings in case it could help you chase down the underlying issue.

[charlie]

You’re absolutely right, that does seem to fix it. In your original video, what device are you using for safari? Is that a macbook or an ipad? I just want to run more tests on BrowserStack.

Has anybody else with this issue had a chance to try this workaround?

I’ll jump right on adding in a 1ms fix to Pro if it means we get to fix this. Probably not the most elegant fix, but most posts online seem to use a workaround one way or the other for animations in Safari.

[JvP]

Just checked and adding the delay does indeed seem to prevent a headline with an scroll animation from doing the “double flash”. I added a 0.01ms delay and that works.

[charlie]

Okay thanks for checking. From what I read 0.01ms would be interpreted by the browser as 1ms. Next release we’ll release a fix around this.

[JvP]

Nice one

[threeoten]

Yeah, it was a macbook pro.

That’s great news, I’m glad I kept tinkering! I had an intentional delay on one of them and realized that that element was not re-animating… so that led me to trying delay on the others. And bam! Worked.