SVG changes color when rotated in Safari 10

Question

I've just run into a very weird problem that only shows up in Safari 10. I have playing cards, svg images, that are sometimes rotated using transform:rotate(xdeg).

The card I'm using has a red block pattern. When it's not rotated, or rotated at right angles, i.e. 90, 180, 270, then it looks normal. But, any other angle than that and the background pattern turns blue! I just got a report about this from one of my users and have never seen anything as weird. Other browsers all work normally, Safari 9 does it normally.

I'm guessing this is just a really weird bug in Safari 10, but any ideas about how to work around it? I've created a minimal repro at:

https://jsfiddle.net/2zv4garu/1/

Solution

Weird bug indeed. Performing the transformation in wrapping g element as an SVG transform does not resolve the issue.

However, by performing a 3D rotation instead of of a 2D one, i.e. inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)'; does resolve the issue, you can see here.

https://jsfiddle.net/qe00s1mg/

Comments

[unwind]

Consider adding a WebKit bug to their bug tracker, if you think this is WebKit-related.

[X-Istence]

This doesn't happen on my Mac Mini late 2012 model or on my 2013 Retina MacBook Pro. Mac Mini: imgur.com/zdAZoWV

[Dave]

Doesn't happen on my non-retina MacBook Pro Late 11 with Safari version 10.0 (12602.1.50.0.10)

[antonone]

Also doesn't happen on Sierra, iMac late 2015 - imgur.com/a/e2FyS

[Šime Vidas]

Can’t reproduce in Safari on iOS 10.0.1.

[Einar Egilsson]

Thanks, that works nicely :) I figured out how the color change happens, it's switching the R and B values from the fill color. The color is #ff0000 and it's switching it to #0000ff. I tried with different values for R and B and saw that it was always the inverse. However the G value is unchanged, in fact if you try the color #00FF00 the card color will not change during rotation. Anyway, thanks for the workaround, I've marked this answer as accepted.

[Paul Schreiber]

Please file a bug at bugreport.apple.com (or bugs.webkit.org) with those details.

[Ilmari Karonen]

@EinarEgilsson: ...and that pretty much explains what's happening. Clearly, someone's using the wrong byte order when rendering the rotated image.

[Einar Egilsson]

@PaulSchreiber Actually it looks like it's already been fixed, people with a newer build of Safari 10 don't seem to be getting this.

[CoffeDeveloper]

Why having a standard so complex that very few people can implement it properly?

[jpa]

@DarioOO Because half correct is better than not trying.

[oligofren]

We were still seeing this bug (or something similar) on some Safari browsers per December 2016. The color shift was not consistently reproducible, but we did do some CSS animation which might be similar.