La fonction de rotation de la CSS crée des artefacts

Question

Je l'ai fait en CSS.

Il fonctionne parfaitement dans Google Chrome après avoir été ajouté :

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

Mais dans FireFox, cela ressemble à ceci :

Voir source ici

J'ai essayé plusieurs choses et j'ai beaucoup cherché. Je ne sais pas ce qu'il faut faire pour se débarrasser de ces bordures que FireFox crée. La plupart des informations que je trouve concernent la transition, que je n'utilise pas. Toute idée serait la bienvenue.

Références :
- La rotation de la transformation CSS3 entraîne un décalage de 1px dans Chrome
- -webkit-transform rotate - Images pixélisées dans Chrome
- L'effet de transition CSS rend l'image floue / déplace l'image de 1px, dans Chrome ?

Answer 1

Ajout de translateZ(1px) avant la règle de rotation semble supprimer ces artefacts :

transform: translateZ(1px) rotate(-45deg);

Voir cette question .