SVG ändert seine Farbe, wenn es in Safari 10 gedreht wird

109

Ich bin gerade auf ein sehr seltsames Problem gestoßen, das nur in Safari 10 auftaucht. Ich habe Spielkarten, SVG-Bilder, die manchmal mit gedreht werden transform:rotate(xdeg).

Die Karte, die ich benutze, hat ein rotes Blockmuster. Wenn es nicht oder rechtwinklig gedreht wird, dh 90, 180, 270, sieht es normal aus. Aber jeder andere Winkel als dieser und das Hintergrundmuster werden blau! Ich habe gerade einen Bericht von einem meiner Benutzer erhalten und noch nie etwas so Seltsames gesehen. Andere Browser funktionieren alle normal, Safari 9 funktioniert normal.

Ich vermute, dies ist nur ein wirklich seltsamer Fehler in Safari 10, aber gibt es Ideen, wie man das umgehen kann? Ich habe einen minimalen Repro erstellt bei:

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

html css svg safari Einar Egilsson
quelle

Erwägen Sie , dem Bug-Tracker einen WebKit-Fehler hinzuzufügen , wenn Sie der Meinung sind, dass dies mit WebKit zusammenhängt.

Entspannen Sie

Dies ist bei meinem Mac Mini-Modell Ende 2012 oder bei meinem 2013 Retina MacBook Pro nicht der Fall. Mac Mini: imgur.com/zdAZoWV

X-Istence

Kommt auf meinem MacBook Pro Late 11 ohne Netzhaut mit Safari Version 10.0 (12602.1.50.0.10) nicht vor

Dave

Auch passiert nicht auf Sierra, iMac Ende 2015 - imgur.com/a/e2FyS

Antonone

Kann in Safari unter iOS 10.0.1 nicht reproduziert werden.

Šime Vidas

Antworten:

In der Tat ein seltsamer Fehler. Durch Ausführen der Transformation im Wrapping- gElement als SVG-Transformation wird das Problem nicht behoben.

Wenn Sie jedoch eine 3D-Drehung anstelle einer 2D-Drehung ausführen, dh inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';das Problem beheben, können Sie dies hier sehen.

https://jsfiddle.net/qe00s1mg/

Methode der Aktion
quelle

Danke, das funktioniert gut :) Ich habe herausgefunden, wie der Farbwechsel abläuft, es werden die R- und B-Werte von der Füllfarbe umgeschaltet. Die Farbe ist # ff0000 und wechselt zu # 0000ff. Ich habe es mit unterschiedlichen Werten für R und B versucht und festgestellt, dass es immer umgekehrt war. Der G-Wert bleibt jedoch unverändert. Wenn Sie die Farbe # 00FF00 ausprobieren, ändert sich die Kartenfarbe während der Drehung nicht. Wie auch immer, danke für die Problemumgehung, ich habe diese Antwort als akzeptiert markiert.

Einar Egilsson

Bitte melden Sie einen Fehler unter bugreport.apple.com (oder bugs.webkit.org) mit diesen Details.

Paul Schreiber

@EinarEgilsson: ... und das erklärt ziemlich genau, was passiert. Es ist klar, dass jemand beim Rendern des gedrehten Bildes die falsche Bytereihenfolge verwendet .

Ilmari Karonen

@PaulSchreiber Eigentlich sieht es so aus, als ob es bereits behoben wurde. Leute mit einem neueren Build von Safari 10 scheinen dies nicht zu verstehen.

Einar Egilsson

@DarioOO Weil halb richtig besser ist, als es nicht zu versuchen.

jpa