We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Is there a way to solve CSS3 transition jitteriness in Firefox when animations are sequenced on 'transitionend'?

more options

I'm having issues with jitteriness/ glitchiness in Firefox 18.0.1 when sequencing transitions in CSS using transitionend. The object I'm trying to animate jumps to the end position briefly, goes back to the start position then proceeds with the tween.

This occurs frequently in Firefox (Mac) and intermittently in Safari. It could also be happening in Windows Firefox, but I haven't checked. Any ideas on what could be causing this?

Have a look at the demo here (FYI it's coded specifically for Firefox): http://umamie.com/csstransition/cssTweenDemo.html

I'm having issues with jitteriness/ glitchiness in Firefox 18.0.1 when sequencing transitions in CSS using transitionend. The object I'm trying to animate jumps to the end position briefly, goes back to the start position then proceeds with the tween. This occurs frequently in Firefox (Mac) and intermittently in Safari. It could also be happening in Windows Firefox, but I haven't checked. Any ideas on what could be causing this? Have a look at the demo here (FYI it's coded specifically for Firefox): http://umamie.com/csstransition/cssTweenDemo.html

All Replies (1)

more options

On Windows 7, I see a brief flash of the square's next destination, then the square moves there.

One known bug involving transforms and position fixed is referenced in this post: https://support.mozilla.org/en-US/que.../948256#answer-401728. No idea whether that's relevant.

(It could be the same issue as in this unsolved thread: https://support.mozilla.org/en-US/que.../949378)