Hi!
I have a simple scaling animation that loops on an image.
Looks great in Safari and Chrome, but glitchy and weird in Firefox.
Things I’ve tried/checked:
- Updated Firefox and tested on different computers
- Replicating the problem in a new project (this is what’s linked below)
- No javascript errors
- Adding hardware acceleration:
translateZ(0) or translate3d(0,0,0)
- Preserve rendering: transform-style: preserve-3d;
Original Project
Video: Chrome and Safari
Video: Firefox
Test Project
It’s not as pronounced, but you can still see the scaling jitters in Firefox.
Video: Chrome and Safari
Video: Firefox
Any suggestions or ideas would be much appreciated - thanks!
Read only: Webflow - Firefox Test
Public: https://firefox-test.webflow.io/
Hello @Rich_Emmerson, I don’t know if this will fix your issue, but I think it is worth trying. In the past I found glitches across browsers when using Webflow interactions that don’t have matching transforms on the interactions panel’s initial state and the style’s panel. So try giving your image on your test project a transform scale as you have it on your initial state in your interactions.
I hope this helps!
Hi @Pablo_Cortes! Thanks for your suggestion, much appreciated!
Unfortunately, it didn’t work.
However, I’ve just noticed that once the page is scrolled down a few pixels, the problem resolves itself, then when scrolling up it’s back to the jitters… what a tease…!
Firefox jitters
1 Like
Found the solution!
Just need to set a minimal value for scale z.
In case it helps someone in the future, I recreated the animation in GSAP thinking it might be a Webflow thing but had the same issue. In the GASP forums Firefox glitching is well known and people often have success with adding a z value.
This is great @Rich_Emmerson, glad you found a solution!
1 Like