-webkit-transform rotate - Images pixélisées dans Chrome

Question

Utilisation de -webkit-transform: rotate(-5deg); sur un conteneur div, Chrome rend la grille d'images avec des bords très irréguliers. Alors que dans FF ( -moz-transform: ) et IE ( -ms-filter: ) tout semble correct - voir la différence ci-dessous.

Y a-t-il quelque chose que je puisse faire à ce sujet ?

Answer 1

Vous pouvez consulter la réponse à la question transformation css, bords irréguliers en chrome

Il m'a aidé à m'en sortir

De la réponse acceptée :

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

Answer 2

Il semble qu'il s'agisse d'un Anti-crénelage bogue dans le moteur webkit. Une plainte a été déposée mais n'est pas encore résolue. .

Vous pouvez essayer d'ajouter une bordure de la même couleur que votre fond pour tenter de minimiser l'effet.

Answer 3

-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);

Fait l'affaire pour le chrome.

Answer 4

Avez-vous essayé la règle CSS -webkit-transform-style: preserve-3d; ?

Vous pouvez également essayer de faire tourner l'axe spécifique avec -webkit-transform: rotateZ(-5deg); .

Answer 5

Il s'agit d'un Bogue WebKit qui a déjà été réparé et le correctif doit apparaître dans Chrome 15 .

La solution de contournement jusqu'à ce que tout le monde mette à jour à 15+ est d'appliquer -webkit-backface-visibility: hidden; à l'élément faisant l'objet de la rotation. Cela a fonctionné pour moi. Cela déclenche l'anticrénelage sur l'élément.