SVG zmienia kolor po obróceniu w przeglądarce Safari 10

109

Właśnie napotkałem bardzo dziwny problem, który pojawia się tylko w Safari 10. Mam karty do gry, obrazy svg, które czasami są obracane za pomocą transform:rotate(xdeg).

Karta, której używam, ma czerwony wzór klocków. Gdy nie jest obrócony lub obrócony pod kątem prostym tj. 90, 180, 270 to wygląda normalnie. Ale pod każdym innym kątem, a wzór tła zmienia kolor na niebieski! Właśnie dostałem raport na ten temat od jednego z moich użytkowników i nigdy nie widziałem niczego tak dziwnego. Inne przeglądarki działają normalnie, Safari 9 działa normalnie.

Domyślam się, że to naprawdę dziwny błąd w Safari 10, ale masz jakieś pomysły, jak go obejść? Stworzyłem minimalną reprodukcję pod adresem:

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

html css svg safari Einar Egilsson
źródło
6
Rozważ dodanie błędu WebKit do ich narzędzia do śledzenia błędów , jeśli uważasz, że jest to związane z WebKit.
odpocząć
2
Nie dzieje się tak na moim modelu Mac Mini z końca 2012 roku ani na moim MacBooku Pro Retina z 2013 roku. Mac Mini: imgur.com/zdAZoWV
X-Istence
2
Nie dzieje się na moim MacBooku Pro Late 11 bez siatkówki z Safari w wersji 10.0 (12602.1.50.0.10)
Dave
Nie zdarza się też na Sierra i iMac pod koniec 2015 r. - imgur.com/a/e2FyS
antonone
Nie można odtworzyć w Safari na iOS 10.0.1.
Šime Vidas

Odpowiedzi:

79

Rzeczywiście dziwny błąd. Wykonanie transformacji zawijanego gelementu jako transformacji SVG nie rozwiązuje problemu.

Jednak wykonanie obrotu 3D zamiast 2D, tj. inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';Rozwiązanie problemu, można zobaczyć tutaj.

https://jsfiddle.net/qe00s1mg/

wprowadź opis obrazu tutaj

metoda działania
źródło
32
Dzięki, fajnie to działa :) Zorientowałem się, jak zachodzi zmiana koloru, to zamiana wartości R i B z koloru wypełnienia. Kolor to # ff0000 i zmienia go na # 0000ff. Próbowałem z różnymi wartościami R i B i zobaczyłem, że zawsze było odwrotnie. Jednak wartość G pozostaje niezmieniona, w rzeczywistości, jeśli spróbujesz koloru # 00FF00, kolor karty nie zmieni się podczas obracania. W każdym razie dziękuję za obejście problemu, oznaczyłem tę odpowiedź jako zaakceptowaną.
Einar Egilsson
19
Zgłoś błąd na bugreport.apple.com (lub bugs.webkit.org), podając te szczegóły.
Paul Schreiber,
15
@EinarEgilsson: ... i to prawie wyjaśnia, co się dzieje. Najwyraźniej ktoś używa złej kolejności bajtów podczas renderowania obróconego obrazu.
Ilmari Karonen
3
@PaulSchreiber Właściwie wygląda na to, że zostało już naprawione, osoby z nowszą wersją Safari 10 nie wydają się tego rozumieć.
Einar Egilsson,
4
@DarioOO Ponieważ w połowie poprawne jest lepsze niż nie próbowanie.
jpa