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

我刚刚遇到了一个非常奇怪的问题，它只出现在Safari 10中。我有扑克牌，svg图像，有时使用

transform:rotate（xdeg）

进行旋转

我用的那张卡片上有红色的方块图案。如果它没有旋转，或者没有以直角旋转，即90、180、270，那么它看起来是正常的。但是，除此之外的任何其他角度，背景图案都会变成蓝色！我刚从我的一个用户那里得到一份关于这件事的报告，我从来没有见过这么奇怪的事情。其他浏览器都正常工作，Safari9正常工作

我猜这只是Safari 10中一个非常奇怪的bug，但是有没有关于如何解决它的想法？我在以下位置创建了一个最小复制：

---

真是奇怪的错误。将

g

元素包装为SVG转换执行转换并不能解决问题

但是，通过执行3D旋转而不是2D旋转，即

inlineCard.style.transform='rotate3d（0,0,1，'+e.currentTarget.value+'deg'）解决了这个问题，您可以在这里看到


谢谢，效果很好：）我知道了颜色变化是如何发生的，它是从填充颜色切换R和B值。颜色为#ff0000，正在切换为#0000ff。我尝试了R和B的不同值，发现它们总是相反的。但是G值不变，事实上，如果您尝试使用颜色#00FF00，卡的颜色在旋转过程中不会改变。无论如何，感谢您的解决方案，我已将此答案标记为已接受。请在bugreport.apple.com（或bugs.webkit.org）上提交一个bug，并提供这些详细信息。@EinarEgilsson:…这基本上解释了发生的情况。显然，有人在渲染旋转图像。PaulSuribbe实际上看起来它已经被修复了，新的Safari 10的构建者似乎并没有得到这一点。如果您认为这与WebKit相关，那么在2012年末的Mac Mini或2013年的Retina MacBook Pro上就不会出现这种情况。Mac Mini:2015年底，Safari版本10.0（12602.1.50.0.10）不会出现在我的非视网膜MacBook Pro Late 11上，iMac Sierra上也不会出现这种情况-无法在iOS 10.0.1上的Safari中复制。