Safari 10で回転するとSVGの色が変わる
Safari 10でのみ表示される非常に奇妙な問題に遭遇しました。トランプ、svg画像があり、transform:rotate(xdeg)を使用して回転させることがあります。
私が使用しているカードには赤いブロックパターンがあります。回転していない場合、または直角に回転している場合、つまり90、180、270の場合、正常に見えます。しかし、それ以外の角度と背景パターンは青に変わります！私はユーザーの一人からこのことについて報告を受けたばかりで、奇妙なものを見たことはありません。他のブラウザはすべて正常に動作しますが、Safari 9は正常に動作します。
これはSafari 10の本当に奇妙なバグだと思いますが、それを回避する方法についてのアイデアはありますか？私は最小の再現を作成しました：
本当に奇妙なバグ。 g要素をSVG変換としてラップして変換を実行しても、問題は解決しません。
ただし、2D回転ではなく3D回転を実行することで、つまりinlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';で問題が解決されるため、ここで確認できます。
https://jsfiddle.net/qe00s1mg/
