Firefox Animation - Mystery Scaling Glitch (with Loom videos)

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:

  1. Updated Firefox and tested on different computers
  2. Replicating the problem in a new project (this is what’s linked below)
  3. No javascript errors
  4. Adding hardware acceleration: translateZ(0) or translate3d(0,0,0)
  5. 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.
Screen Shot 2024-01-26 at 2.13.17 PM
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

Found the solution!

Just need to set a minimal value for scale z.

Screenshot at Jan 27 12-41-37

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