The sad state of matrix transformsMarch 17, 2015

TL;DR - do not use anything except translate, everything else is broken in modern browsers, nobody cares.

What’s the fuss?

Well we have transforms for how long supported cross browsers? Right, since IE9, released at Mar-14 2011. Much longer on “modern browsers”. Below i show you that unfortunately in the Spring of 2015 only IE gets them right and all other “modern browsers” still fail miserably on scaling and rotating. Surprising? Oh yes.

Browser zoom does not work in Safari and Chrome

Using scale() is considered harmful. If you scale your content and user decides to use browser zoom, scaled content is zoomed incorrectly. There are some differences between Safari and Chrome and at some zoom levels scaling is even correct.

Test case

Theres bug filed for Chrome Dec-14 2014 and Mar-3 2015 the status was changed to “This issue has already been moved once and is lower than Priority 1, therefore removing mstone.” As Chrome is very popular browser, my advice is do not use scale().

Oh, theres a bug filed for Safari too, about that, or course i can’t say anything.

Image rotate and scale does not work in Firefox

UPDATE

Escalated thanks to Hacker News, this FF bug is now fixed (it takes time naturally to go live).

Using rotate() and scale() considered harmful. If you scale and rotate your images then Firefox will scale the end result completely wrong. The bounding box is correct, but the image itself gets distorted.

Test case

Theres bug filed Feb-02 2015 and until now it just sits there with status of Unconfirmed and Untriaged. Firefox is pretty popular too, my advice is do not scale() and rotate() images.

Internet Explorer gets everything right

Yes, there you go. What can i say… Use translate() only.