CSS 'transformieren drehen' schafft Artefakte

Question

Ich habe dies in CSS getan.

Es funktioniert gut in Google Chrome nach der Zugabe:

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

Aber in FireFox sieht es wie folgt aus:

source here

I t Siehe ried mehrere dinge und suchte viel. Ich weiß nicht, was ich tun soll, um die Grenzen zu beseitigen, die FireFox schafft. Die meisten Sachen, die ich finde, sind über Übergang, die ich nicht verwende. Irgendwelche Ideen wären sehr willkommen.

Referenzen:
- CSS3 transform rotate causing 1px shift in Chrome
- -webkit-transform rotate - Pixelated images in Chrome
- CSS transition effect makes image blurry/moves image 1px, in Chrome?

Answer 1

translateZ(1px) vor der Rotation Regel scheint das Hinzufügen dieser Artefakte zu entfernen:

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

this question See.