SVG在Safari 10中旋轉時顏色改變

108

我剛剛遇到了一個很奇怪的問題，它只在Safari 10中出現。我有紙牌，svg圖像，有時使用transform:rotate(xdeg)進行旋轉。SVG在Safari 10中旋轉時顏色改變

我正在使用的卡有紅色塊模式。當它沒有旋轉或以直角旋轉時，即90,180,270，那麼它看起來很正常。但是，除此之外的任何其他角度和背景圖案都會變成藍色！我剛剛從我的一位用戶那裏得到了一份關於此事的報告，從未見過任何奇怪的事情。其他瀏覽器均正常工作，Safari 9正常工作。

我猜這只是Safari 10中一個非常奇怪的錯誤，但是有關如何解決它的任何想法？我在創建一個最小化的攝製：

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

來源

2016-09-22 Einar Egilsson

考慮加入WebKit的錯誤[他們的bug跟蹤系統（https://bugs.webkit.org/），如果你認爲這是WebKit的相關。 – unwind

這不會發生在我的Mac Mini晚年2012款或2013年Retina MacBook Pro上。 Mac Mini：http：//imgur.com/zdAZoWV –

不會在我的非視網膜MacBook Pro Late 11上使用Safari 10.0版本（12602.1.50.0.10） – Dave

奇怪的錯誤確實。在將元素轉換爲SVG轉換時執行轉換不能解決問題。

但是，通過執行3D旋轉而不是2D旋轉，即inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';確實可以解決問題，您可以在此處看到。

https://jsfiddle.net/qe00s1mg/

來源

2016-09-22 11:49:41 Duopixel

+32

謝謝，這很好用:)我計算出顏色變化是如何發生的，它從填充顏色切換R和B值。顏色是＃ff0000，它將它切換到＃0000ff。我嘗試了R和B的不同值，並且發現它總是相反的。但是，G值不變，事實上，如果您嘗試顏色＃00FF00，則在旋轉期間卡的顏色不會改變。無論如何，感謝您的解決方法，我已將此答案標記爲已接受。 –

+19

請在bugreport.apple.com（或bugs.webkit.org）上提供這些詳細信息的錯誤。 –

+15

@EinarEgilsson：...這很好解釋了發生了什麼。顯然，有人[使用錯誤的字節順序]（http://stackoverflow.com/questions/5123387/loading-a-bmp-into-an-opengl-textures-switches-the-red-and-blue-colors-c -win）時渲染旋轉的圖像。 –

SVG在Safari 10中旋轉時顏色改變

回答

相關問題