109

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/

Sindre Sorhus
  • 62,972
  • 39
  • 168
  • 232
Einar Egilsson
  • 3,438
  • 9
  • 36
  • 47

1 Answers1

79

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/

enter image description here

methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • 32
    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. – Einar Egilsson Sep 22 '16 at 12:28
  • 19
    Please file a bug at bugreport.apple.com (or bugs.webkit.org) with those details. – Paul Schreiber Sep 22 '16 at 14:20
  • 15
    @EinarEgilsson: ...and that pretty much explains what's happening. Clearly, someone's [using the wrong byte order](http://stackoverflow.com/questions/5123387/loading-a-bmp-into-an-opengl-textures-switches-the-red-and-blue-colors-c-win) when rendering the rotated image. – Ilmari Karonen Sep 22 '16 at 17:01
  • 3
    @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. – Einar Egilsson Sep 22 '16 at 17:38
  • Why having a standard so complex that very few people can implement it properly? – CoffeDeveloper Sep 23 '16 at 06:47
  • 4
    @DarioOO Because half correct is better than not trying. – jpa Sep 23 '16 at 12:11
  • 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. – oligofren Jan 07 '17 at 09:00