[css3-transforms] Matrix de/recomposition

All,

the CSS Transforms spec defines how a matrix should be decomposed [1].
However, it seems that we have no interoperability on this.
I extended one of David Baron's examples so it shows how animations render
differently: http://jsfiddle.net/cabanier/Vv84m/embedded/result/

Chrome is the only browser that is following the spec.
Safari is different but renders more reasonably. (WebKit bug:
https://bugs.webkit.org/show_bug.cgi?id=112824)
Firefox renders very different from both Chrome and Safari. Looking at the
FF code, it special cases 2d decomposition and applies a different
algorithm.
IE is very different and seems to get the end state wrong in many occasions.

Of all the browsers, Safari has the best results in this particular test.
Once Apple fixes that particular WebKit bug, Chrome and Safari will match.

Looking over the history, there was an action created during TPAC [2].
Has there been more investigation on the Firefox side? It seems that both
IE and Firefox could adopt the WebKit logic once it matches Safari.


1: http://www.w3.org/TR/css3-transforms/#matrix-decomposing
2: http://lists.w3.org/Archives/Public/www-style/2012Nov/0261.html

Received on Monday, 1 April 2013 20:27:32 UTC