Safari 10で回転するとSVGの色が変わる

109

Safari 10でのみ発生する非常に奇妙な問題が発生しました。トランプ、svg画像があり、これらはを使用して回転される場合がありtransform:rotate(xdeg)ます。

私が使用しているカードは赤いブロックパターンです。回転していない場合、または直角、つまり90、180、270度に回転している場合は、正常に見えます。しかし、それ以外の角度と背景パターンは青くなります！私はユーザーの1人からこれに関するレポートを受け取ったばかりで、奇妙なものを見たことはありません。他のブラウザはすべて正常に動作し、Safari 9は正常に動作します。

これはSafari 10の非常に奇妙なバグだと思いますが、回避策に関するアイデアはありますか？私は次の場所で最小限の再現を作成しました：

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

— アイナー・エイルソン
ソース

WebKitに関連していると思われる場合は、バグトラッカーに WebKitバグを追加することを検討してください。

— アンワインド

これは私のMac Mini 2012年後半モデルや2013 Retina MacBook Proでは起こりません。Mac Mini：imgur.com/zdAZoWV

— X-Istence

Safariバージョン10.0（12602.1.50.0.10）がインストールされた、Retina以外のMacBook Pro Late 11では発生しません

— Dave

また、2015年後半のSierra、iMacでは発生しません-imgur.com/a/e2FyS

— antonone

iOS 10.0.1のSafariでは再現できません。

— サイムVIDAS

確かに奇妙なバグ。ラッピングg要素で変換をSVG変換として実行しても問題は解決しません。

ただし、2Dの代わりに3D回転を実行することにより、つまりinlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';問題を解決すると、ここに表示されます。

https://jsfiddle.net/qe00s1mg/

— アクションの方法
ソース

ありがとう、それはうまくいきます:)私は色の変化がどのように起こるかを理解しました、それは塗りつぶしの色からRとBの値を切り替えることです。色は＃ff0000で、＃0000ffに切り替わります。RとBに異なる値を試してみたところ、常に逆になることがわかりました。ただし、G値は変更されていません。実際、色＃00FF00を試しても、回転中にカードの色は変わりません。とにかく、回避策のおかげで、私はこの回答を承認済みとしてマークしました。

— Einar Egilsson

バグの詳細は、bugreport.apple.com（またはbugs.webkit.org）に報告してください。

— ポールシュライバー

@EinarEgilsson：...そして、それは何が起こっているのかをかなり説明しています。明らかに、回転した画像をレンダリングするときに誰かが間違ったバイト順を使用しています。

— Ilmari Karonen

@PaulSchreiber実際にはすでに修正されているようですが、Safari 10の新しいビルドを持っている人はこれを取得していないようです。

— Einar Egilsson

@DarioOO試していないよりも半分正解の方が良いため。

— 2016