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

109

我刚遇到一个非常奇怪的问题，该问题只在Safari 10中显示。我有纸牌，svg图像，有时会使用来旋转transform:rotate(xdeg)。

我正在使用的卡有红色方块图案。当它不旋转或以直角（即90、180、270）旋转时，它看起来很正常。但是，除此以外的任何角度都将使背景图案变成蓝色！我刚刚从一个用户那里得到了一份关于此的报告，却从未见过如此怪异的东西。其他浏览器均正常运行，Safari 9正常运行。

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

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

— 埃纳尔·埃吉森（Einar Egilsson）
source

如果您认为这与WebKit相关，请考虑将WebKit错误添加到其错误跟踪器中。

— 放松

我的2012年末Mac Mini或2013年Retina MacBook Pro上没有这种情况。Mac Mini：imgur.com/zdAZoWV

— X-Istence'9

我的非视网膜MacBook Pro Late 11的Safari版本10.0（12602.1.50.0.10）不会发生

— Dave

在2015年末推出的iMac Sierra上也不会发生这种情况-imgur.com/a/e2FyS

— antonone

无法在iOS 10.0.1的Safari中重现。

— 森那维达斯

确实是怪虫。将包装g元素作为SVG转换执行转换不能解决问题。

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

https://jsfiddle.net/qe00s1mg/

— 行动方法
source

谢谢，这很好用:)我弄清楚了颜色变化是如何发生的，它是从填充颜色切换R和B值。颜色为＃ff0000，并将其切换为＃0000ff。我尝试使用不同的R和B值，发现它总是相反的。但是G值不变，实际上，如果您尝试使用颜色＃00FF00，则卡片颜色在旋转期间不会改变。无论如何，感谢您的解决方法，我已将此答案标记为已接受。

— Einar Egilsson

请在bugreport.apple.com（或bugs.webkit.org）上提交包含这些详细信息的错误。

— Paul Schreiber

@EinarEgilsson：...这几乎可以解释发生了什么。显然，有人在渲染旋转图像时使用了错误的字节顺序。

— Ilmari Karonen

@PaulSchreiber实际上，它似乎已经被修复，拥有较新版本的Safari 10的人似乎并没有得到这个。

— Einar Egilsson

@DarioOO因为一半正确比不尝试更好。

— jpa