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 à:
Réponses:
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/
la source