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

Ein*_*son 109 html css safari svg

我遇到了一个非常奇怪的问题,只出现在Safari 10中.我有扑克牌,svg图像,有时会轮换使用transform:rotate(xdeg).

我正在使用的卡片有红色块图案.当它没有旋转或以直角旋转时,即90,180,270,那么它看起来很正常.但是,除此之外的任何角度和背景图案都会变成蓝色!我刚收到一位用户的报告,从未见过如此奇怪的事情.其他浏览器都正常工作,Safari 9正常运行.

我猜这只是Safari 10中一个非常奇怪的错误,但有关如何解决它的任何想法?我创建了一个最小的repro:

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

met*_*ion 79

奇怪的错误确实.在包装g元素中执行转换作为SVG转换不能解决问题.

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

https://jsfiddle.net/qe00s1mg/

在此输入图像描述

  • 谢谢,这很好用:)我弄清楚颜色变化是如何发生的,它是从填充颜色切换R和B值.颜色是#ff0000,它将它切换到#0000ff.我尝试了R和B的不同值,并发现它总是相反的.但是G值没有变化,实际上如果你尝试颜色#00FF00,卡片颜色在旋转过程中不会改变.无论如何,感谢您的解决方法,我已将此答案标记为已接受. (32认同)
  • 请在bugreport.apple.com(或bugs.webkit.org)上提交有关这些详细信息的错误. (19认同)
  • @EinarEgilsson:......这几乎可以解释发生了什么.显然,有人[使用错误的字节顺序](http://stackoverflow.com/questions/5123387/loading-a-bmp-into-an-opengl-textures-switches-the-red-and-blue-colors-c -win)渲染旋转图像时. (15认同)
  • @DarioOO因为一半正确比不尝试更好. (4认同)
  • @PaulSchreiber实际上看起来它已经被修复了,拥有更新版Safari 10的人似乎没有得到这个. (3认同)