transformation css, bords irréguliers dans chrome

Question

J'ai utilisé CSS3 transform pour faire pivoter des images et des zones de texte avec des bordures dans mon site web.

Le problème est que les bordures sont irrégulières dans Chrome, comme dans un jeu (basse résolution) sans anti-crénelage. Dans IE, Opera et FF, l'aspect est bien meilleur parce que l'anti-crénelage est utilisé (ce qui est encore clairement visible mais pas si mal). Je ne peux pas tester Safari car je n'ai pas de Mac.

La photo pivotée et le texte lui-même sont corrects, c'est seulement la bordure qui est irrégulière.

La méthode CSS que j'utilise est la suivante :

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

Existe-t-il un moyen de résoudre ce problème, par exemple en forçant Chrome à utiliser AA ?

Exemple ci-dessous :

Answer 1

Au cas où quelqu'un le chercherait plus tard, une bonne astuce pour se débarrasser de ces bords irréguliers sur les transformations CSS dans Chrome est d'ajouter la propriété CSS -webkit-backface-visibility avec une valeur de hidden . Dans mes propres tests, cela les a complètement lissés.

-webkit-backface-visibility: hidden;

Answer 2

Si vous utilisez transition au lieu de transform , -webkit-backface-visibility: hidden; ne fonctionne pas. Un bord dentelé apparaît lors de l'animation d'un fichier png transparent.

Pour résoudre ce problème, j'ai utilisé : outline: 1px solid transparent;

Answer 3

L'ajout d'une bordure transparente de 1px déclenche l'anticrénelage.

outline: 1px solid transparent;

Il est également possible d'ajouter une ombre transparente de 1px.

box-shadow: 0 0 1px rgba(255,255,255,0);

Answer 4

Essayez la transformation 3D. Cela fonctionne à merveille !

/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d; 
-webkit-transform: rotateZ(2deg);

Answer 5

J'ai essayé toutes les solutions proposées ici et elles n'ont pas fonctionné dans mon cas. Mais en utilisant

will-change: transform;

corrige le problème de la dentelure.