SVG는 Safari 10에서 회전하면 색상이 변경됩니다.

109

Safari 10에서만 나타나는 매우 이상한 문제가 발생했습니다 transform:rotate(xdeg). 가끔을 사용하여 회전하는 카드 놀이, svg 이미지가 있습니다 .

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

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

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

— Einar Egilsson
소스

WebKit과 관련된 것으로 생각되면 WebKit 버그 를 버그 추적기에 추가하는 것을 고려하십시오 .

— 긴장 풀기

Mac Mini 2012 후반 모델 또는 2013 Retina MacBook Pro에서는 이런 일이 발생하지 않습니다. 맥 미니 : imgur.com/zdAZoWV

— X-Istence

레티 나가 아닌 MacBook Pro Late 11 (Safari 버전 10.0 (12602.1.50.0.10))에서 발생하지 않음

— Dave

2015 년 후반에 Sierra, iMac에서도 발생하지 않습니다.- imgur.com

— a

iOS 10.0.1의 Safari에서 재현 할 수 없습니다.

— Šime 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)에 버그를 신고하십시오.

— Paul Schreiber

@EinarEgilsson : ... 그리고 그것은 무슨 일이 일어나고 있는지 거의 설명합니다. 분명히 누군가가 회전 된 이미지를 렌더링 할 때 잘못된 바이트 순서를 사용하고 있습니다.

— Ilmari Karonen 16. 9.

@PaulSchreiber 실제로 이미 수정 된 것 같습니다. Safari 10의 최신 빌드를 사용하는 사람들은 이것을 얻지 못하는 것 같습니다.

— Einar Egilsson

@DarioOO 반올림이 시도하지 않는 것보다 낫기 때문입니다.

— jpa 2016-09-23