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/

Answer 1

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/