Bug 54616 – transform:matrix() doesn’t respect -0 so can’t do clockwise 180° rotation

• Status: NEW
• Component: CSS

[Oli Studholme]

When transitioning rotations, transform:rotate(180deg) goes clockwise. Converting this to a matrix-based rotation gives transform: matrix(-1,0,-0,-1,0,0), but this rotates counter-clockwise (SVG default) when transitioned. It seems WebKit doesn’t respect -0, so it’s not possible to rotate clockwise for 180° (and multiples thereof).
Linked example fails in WebKit Version 5.0.3 (6533.19.4, r78685), Safari Version 5.0.3 (6533.19.4) and Chrome 9.0.597.102. -0 is respected and linked example works as expected in Opera 11.01 and Firefox 4 beta.
http://oli.jp/bugs/webkit/transform-matrix-rotate.html

[Simon Fraser (smfr)]

Please attach your test cases rather than linking to them. Linked files have a habit of going away.

[Chris Marrin]

How is this different than https://bugs.webkit.org/show_bug.cgi?id=54617, which I commented on?

[Oli Studholme]

Created attachment 82892 [details]
demonstration of difference between -webkit-transform:rotate(180deg) (CW) and -webkit-transform:matrix(-1,0,-0,-1,0,0) (CCW)

Attaching testcase as per @smfr’s request

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.5 on macOS 12.4 based on attached test case and fro the expected result - the rotation of transform:matrix(180deg) [second last] is anti-clockwise on hover while all other browsers (Chrome Canary 105 and Firefox Nightly 104) have it as clockwise. Thanks!

[Ahmad Saleem]

Still an issue with WebKit ToT (264981@main). Adding ‘BrowserCompat’ tag for future easier tracking of only failing case in Safari / WebKit.

[Radar WebKit Bug Importer]

<rdar://problem/122588417>