Safari 10에서 회전하면 SVG의 색상이 변경됨

Safari 10에서 회전하면 SVG의 색상이 변경됨

---

방금 Safari 10에만 표시되는 매우 이상한 문제가 발생했습니다 transform:rotate(xdeg). 때때로 카드를 사용하여 회전하는 카드, svg 이미지가 있습니다 .

사용중인 카드에 빨간색 블록 패턴이 있습니다. 회전하지 않거나 90, 180, 270과 같은 직각으로 회전하면 정상적으로 보입니다. 그러나 그 이외의 각도와 배경 패턴은 파란색으로 바뀝니다! 방금 사용자 중 한 명으로부터 이것에 대한 보고서를 받았으며 이상한 것을 본 적이 없습니다. 다른 브라우저는 모두 정상적으로 작동하며 Safari 9는 정상적으로 작동합니다.

Safari 10에서는 이것이 정말 이상한 버그라고 생각하지만 해결 방법에 대한 아이디어가 있습니까? 나는 최소한의 재현을 만들었습니다.

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

---

정말 이상한 버그. 래핑 g요소에서 SVG 변환으로 변환을 수행해도 문제가 해결되지 않습니다.

그러나 2D 회전 대신 3D 회전을 수행 inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';하여 문제를 해결하면 여기에서 볼 수 있습니다.

https://jsfiddle.net/qe00s1mg/

참고 URL : https://stackoverflow.com/questions/39637347/svg-changes-color-when-rotated-in-safari-10