Safari 10에서만 나타나는 매우 이상한 문제가 발생했습니다 transform:rotate(xdeg). 가끔을 사용하여 회전하는 카드 놀이, svg 이미지가 있습니다 .
사용중인 카드는 빨간색 블록 패턴입니다. 회전하지 않거나 직각 (예 : 90, 180, 270)으로 회전하면 정상적으로 보입니다. 그러나 그 이외의 각도와 배경 패턴은 파란색으로 변합니다! 내 사용자 중 한 명으로부터 이것에 대한 보고서를 받았으며 이상한 것을 본 적이 없습니다. 다른 브라우저는 모두 정상적으로 작동하지만 Safari 9는 정상적으로 작동합니다.
나는 이것이 사파리 10의 정말 이상한 버그라고 생각하지만, 그것을 해결하는 방법에 대한 아이디어가 있습니까? 다음에서 최소한의 재현을 만들었습니다.
답변
참으로 이상한 버그. 래핑 g요소에서 SVG 변환으로 변환을 수행해도 문제가 해결되지 않습니다.
그러나 2D 회전 대신 3D 회전을 수행 inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';하면 문제가 해결됩니다. 여기에서 확인할 수 있습니다.
https://jsfiddle.net/qe00s1mg/
