109 votes

Le SVG change de couleur lorsqu'il est tourné dans Safari 10

Je viens de rencontrer un problème très étrange qui ne se manifeste que dans Safari 10. J'ai des cartes à jouer, des images svg, qui sont parfois tournées à l'aide de la fonction de rotation. transform:rotate(xdeg) .

La carte que j'utilise a un motif de blocs rouges. Lorsqu'elle n'est pas tournée, ou lorsqu'elle est tournée à angle droit, c'est-à-dire à 90, 180 ou 270, elle semble normale. Mais, à tout autre angle, le motif de fond devient bleu ! Je viens de recevoir un rapport à ce sujet de la part d'un de mes utilisateurs et je n'ai jamais rien vu d'aussi bizarre. Les autres navigateurs fonctionnent tous normalement, Safari 9 le fait aussi.

Je suppose qu'il s'agit d'un bogue vraiment bizarre dans Safari 10, mais avez-vous une idée de la façon de le contourner ? J'ai créé une reproduction minimale à l'adresse suivante

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

79voto

Duopixel Points 27962

Bug bizarre en effet. Effectuer la transformation en enveloppant g comme une transformation SVG ne résout pas le problème.

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

https://jsfiddle.net/qe00s1mg/

enter image description here

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X