Jump to content
Search Community

Firefox transform perspective and rotation glitch

rgfx test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

On windows 7 with firefox am getting glitch at the end of my animation, can't seem to fix it. I get the same glitch on any element I rotate, using this effect a lot, so hoping for a solution . Wonder if its a firefox bug or my computer. Should I still publish it since it works on every other browser?


Here is a video, tried uploading to youtube but the framerate is not high enough to see. http://rgfx.net/del/firefox-transform-render-issue.mp4

See the Pen GgJRWv by rgfx (@rgfx) on CodePen

Link to comment
Share on other sites


I don't know what's going on at the end of the animation, but if you add a transparent outline to the h2 it will clean up some of those jaggies. 

h2 {
  outline: 1px solid transparent;


I used that fix a lot in past CSS animations, I did tons of testing previously, something must of happened with a recent FF update. Anyway disabling transform perspective gets rid of the those "jaggies" as well. 


For now just using browser detection. 

if (!!navigator.userAgent.match(/firefox/i)) { 
 var transF = 0; 
 transF = 200
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...