Is there a way to solve CSS3 transition jitteriness in Firefox when animations are sequenced on 'transitionend'?
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
Additional System Details
- Displays Java applet content, or a placeholder if Java is not installed.
- Version 22.214.171.12476
- Google Talk Plugin Video Accelerator version:0.1.44.23
- A plugin to detect whether the Adobe Application Manager is installed on this machine.
- Shockwave Flash 11.5 r502
- The QuickTime Plugin allows you to view a wide variety of multimedia content in web pages. For more information, visit the QuickTime Web site.
- Office Live Update v1.0
- SiteAdvisor browser plug-in
- Amazon MP3 Downloader Plugin 1.0.17
- Adobe Shockwave for Director Netscape plug-in, version 11.6.3
- The Google Earth Plugin allows you to view 3D imagery and terrain in your web browser.
- doubleTwist Web Plugin
- Picasa plugin.
- npmnqmp 071101000050
- User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:18.0) Gecko/20100101 Firefox/18.0
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)