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

How do I stop FireFox from converting css3 transforms such as scale, or rotate, into matrix transforms?

  • 1 reply
  • 3 have this problem
  • 7 views
  • Last reply by Beefzilla

more options

Go to pilatch.com/cards and click any of the cards in the arc. Now do the same in Chrome, or Safari, or IE 9. I have un-min-catted all my JavaScript, so you can see what's going on more easily.

CSS3 transforms in version 16 of FireFox are being converted into matrix transforms. It pretty much horks my rotate and scale animations. For instance, if you set the style attribute of an element to something like, style="transform:scale(0.75)", FireFox immediately converts that element's transform property, such as <element>.style.transform to "matrix(...)".

I know how to do the linear algebra to convert rotate and scale via jQuery cssHooks into matrix transformations, and I've even written code to detect this "feature" of a browser, (that it forces a transform into matrix), and return a different hook that writes a matrix transform instead of a rotate transform, or scale, all in the past two days, on my development site.

However, it's proving to be increasingly challenging to make this new feature compatible with jQuery's animations. Going further, I may have to hack jQuery just to make this work for FireFox, or drop FireFox animation support altogether unless some FireFox developers make their new implementation backwards compatible.

I know that transforms normally get converted into matrices behind the scenes in the rendering engine. Leave your matrix there. Don't overwrite what the user has put in for a transform!

I also know that I should be using CSS3 animations, but, dangit, I started this project before those had widespread support. I can't rewrite all my animations because I want to support FireFox. That's not really an option. I'll direct my users to Chrome instead. I have more features in development that use these types of animation, and I'm in too deep to turn back.

Thanks for your consideration. Please contact me as you learn more about this.

-Beefzilla

Go to pilatch.com/cards and click any of the cards in the arc. Now do the same in Chrome, or Safari, or IE 9. I have un-min-catted all my JavaScript, so you can see what's going on more easily. CSS3 transforms in version 16 of FireFox are being converted into matrix transforms. It pretty much horks my rotate and scale animations. For instance, if you set the style attribute of an element to something like, style="transform:scale(0.75)", FireFox immediately converts that element's transform property, such as <element>.style.transform to "matrix(...)". I know how to do the linear algebra to convert rotate and scale via jQuery cssHooks into matrix transformations, and I've even written code to detect this "feature" of a browser, (that it forces a transform into matrix), and return a different hook that writes a matrix transform instead of a rotate transform, or scale, all in the past two days, on my development site. However, it's proving to be increasingly challenging to make this new feature compatible with jQuery's animations. Going further, I may have to hack jQuery just to make this work for FireFox, or drop FireFox animation support altogether unless some FireFox developers make their new implementation backwards compatible. I know that transforms normally get converted into matrices behind the scenes in the rendering engine. Leave your matrix there. Don't overwrite what the user has put in for a transform! I also know that I should be using CSS3 animations, but, dangit, I started this project before those had widespread support. I can't rewrite all my animations because I want to support FireFox. That's not really an option. I'll direct my users to Chrome instead. I have more features in development that use these types of animation, and I'm in too deep to turn back. Thanks for your consideration. Please contact me as you learn more about this. -Beefzilla

Modified by Beefzilla

All Replies (1)

more options

The URL in question is pilatch.com/cards