SVG change de couleur lors de la rotation dans Safari 10
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 pivotées à l'aide de transform:rotate(xdeg).
La carte que j'utilise a un motif de bloc rouge. Lorsque vous ne faites pas pivoter ou que vous faites pivoter à angle droit, c’est-à-dire 90, 180, 270, cela semble normal. Mais, tout autre angle que celui et le motif de fond 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.
J'imagine que c'est un bogue vraiment étrange dans Safari 10, mais y a-t-il une idée sur la façon de le contourner? J'ai créé une repro minimale à:
Bizarre bug en effet. Effectuer la transformation dans l'élément wrapping g 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-à-dire que inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)'; résout le problème, comme vous pouvez le voir ici.
https://jsfiddle.net/qe00s1mg/
