SVG changes color when rotated in Safari 10

html css svg safari

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/

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

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

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

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

Can’t reproduce in Safari on iOS 10.0.1.

methodofaction

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/

https://i.stack.imgur.com/EA8nD.png

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.

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

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

@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.

@DarioOO Because half correct is better than not trying.

SVG changes color when rotated in Safari 10

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US