在Safari 10中旋转SVG会改变颜色

Question

我刚遇到一个非常奇怪的问题，只在Safari 10中出现。我有一些纸牌，即svg图像，有时会使用transform:rotate(xdeg)进行旋转。

我使用的纸牌具有红色块状图案。当它没有旋转或者旋转为直角，即90、180、270度时，它看起来很正常。但是，任何不同于这些角度的其他角度，背景图案就会变成蓝色！我刚刚从我的一位用户那里收到了这个报告，以前从未见过如此奇怪的情况。其他浏览器都正常工作，Safari 9也能正常运行。

我猜这可能是Safari 10中的一个非常奇怪的bug，但有什么解决办法吗？我已经在以下网址上创建了最小的可重现版本：

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

- Einar Egilsson

---

如果您认为这与WebKit有关，可以考虑将WebKit漏洞添加到他们的漏洞跟踪器中（https://bugs.webkit.org/）。 - unwind

这在我的Mac Mini 2012年末型号或2013年的Retina MacBook Pro上不会发生。Mac Mini：http://imgur.com/zdAZoWV - X-Istence

我的非Retina MacBook Pro Late 11上使用Safari版本10.0 (12602.1.50.0.10)没有出现这种情况。 - Dave

同样的问题在Sierra和2015年底的iMac上没有发生 - http://imgur.com/a/e2FyS - antonone

无法在iOS 10.0.1的Safari中重现。 - Šime Vidas

Answer 1

确实是个奇怪的 bug。将 g 元素包装在 SVG 变换中执行并不能解决问题。

但是，通过执行 3D 旋转而不是 2D 旋转，即 inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)'; 可以解决该问题，您可以在此处查看。

https://jsfiddle.net/qe00s1mg/

- methodofaction

---

谢谢，这很好用 :) 我弄清楚了颜色变化的方式，它是通过交换填充颜色中的红和蓝值实现的。颜色是 #ff0000 ，将其切换为 #0000ff 。我尝试了不同的 R 和 B 值，并发现它始终是相反的。然而，G 值没有改变，实际上，如果您尝试使用颜色 #00FF00，则在旋转期间卡片颜色不会改变。无论如何，感谢您提供的解决方法，我已将此答案标记为已接受。 - Einar Egilsson

请在bugreport.apple.com（或bugs.webkit.org）上提交一个带有这些细节的缺陷报告。 - Paul Schreiber

很明显，当渲染旋转的图像时，有人正在使用错误的字节顺序，这基本上解释了正在发生的事情。 - Ilmari Karonen

看起来问题已经修复了，使用较新版本的 Safari 10 的用户似乎没有遇到这个问题。 - Einar Egilsson

因为半对总比不尝试要好。 - jpa