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/

— Einar Egilsson
źródło

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ąć

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

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

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/

— metoda działania
źródło

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

Zgłoś błąd na bugreport.apple.com (lub bugs.webkit.org), podając te szczegóły.

— Paul Schreiber,

@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

@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,

@DarioOO Ponieważ w połowie poprawne jest lepsze niż nie próbowanie.

— jpa