SVG change de couleur lors de la rotation dans Safari 10

109

Je viens de rencontrer un problème très étrange qui n'apparaît que dans Safari 10. J'ai des cartes à jouer, des images svg, qui sont parfois tournées en utilisant transform:rotate(xdeg).

La carte que j'utilise a un motif de bloc rouge. Lorsqu'il n'est pas tourné ou tourné à angle droit, c'est-à-dire 90, 180, 270, alors cela semble normal. Mais, tout autre angle que cela et le motif d'arrière-plan devient bleu! Je viens de recevoir un rapport à ce sujet d'un de mes utilisateurs et je n'ai jamais rien vu d'aussi étrange. Les autres navigateurs fonctionnent tous normalement, Safari 9 le fait normalement.

Je suppose que c'est juste un bug vraiment étrange dans Safari 10, mais des idées sur la façon de le contourner? J'ai créé une reproduction minimale à:

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

— Einar Egilsson
source

Pensez à ajouter un bogue WebKit à leur outil de suivi des bogues , si vous pensez que cela est lié à WebKit.

— détendre le

Cela ne se produit pas sur mon modèle Mac Mini fin 2012 ou sur mon MacBook Pro Retina 2013. Mac Mini: imgur.com/zdAZoWV

— X-Istence

Cela ne se produit pas sur mon MacBook Pro Late 11 non rétine avec Safari version 10.0 (12602.1.50.0.10)

— Dave

Cela n'arrive pas non plus sur Sierra, iMac fin 2015 - imgur.com/a/e2FyS

— antonone

Impossible de reproduire dans Safari sur iOS 10.0.1.

— Šime Vidas

Bug étrange en effet. L'exécution de la transformation dans l' gélément d' encapsulation en tant que transformation SVG ne résout pas le problème.

Cependant, en effectuant une rotation 3D au lieu d'une rotation 2D, c'est inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';-à- dire résout le problème, vous pouvez voir ici.

https://jsfiddle.net/qe00s1mg/

— méthode d'action
source

Merci, cela fonctionne bien :) J'ai compris comment le changement de couleur se produit, il change les valeurs R et B de la couleur de remplissage. La couleur est # ff0000 et le fait passer à # 0000ff. J'ai essayé avec des valeurs différentes pour R et B et j'ai vu que c'était toujours l'inverse. Cependant, la valeur G reste inchangée, en fait si vous essayez la couleur # 00FF00, la couleur de la carte ne changera pas pendant la rotation. Quoi qu'il en soit, merci pour la solution de contournement, j'ai marqué cette réponse comme acceptée.

— Einar Egilsson du

Veuillez signaler un bogue sur bugreport.apple.com (ou bugs.webkit.org) avec ces détails.

— Paul Schreiber le

@EinarEgilsson: ... et cela explique à peu près ce qui se passe. De toute évidence, quelqu'un utilise le mauvais ordre d'octets lors du rendu de l'image pivotée.

— Ilmari Karonen

@PaulSchreiber En fait, il semble que cela ait déjà été corrigé, les personnes avec une version plus récente de Safari 10 ne semblent pas comprendre cela.

— Einar Egilsson

@DarioOO Parce que la moitié correcte vaut mieux que de ne pas essayer.

— jpa