web-dev-qa-db-fra.com

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

À l'aide de -webkit-transform: rotate(-5deg); sur un div de conteneur, Chrome affiche la grille des images avec des bords très irréguliers. Alors que dans FF (-moz-transform:) et IE (-ms-filter:) tout semble aller pour le mieux - voir la différence ci-dessous.

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

chromeff

htmlcssgoogle-chrometransform
33
davivid

Vous pouvez consulter la réponse à la question Transformation CSS, bords dentelés en chrome

M'a aidé

De la réponse acceptée:

Au cas où quelqu'un chercherait ça plus tard, une bonne astuce pour se débarrasser. de ces bords dentelés sur les transformations CSS dans Chrome consiste à ajouter le Propriété CSS -webkit-backface-visibility avec la valeur hidden. Dans mes propres tests, cela les a complètement lissées. Espérer que aide.

68
Christian Westman

Il semble que ce soit un Antialiasing bug dans le moteur de webkit. Un rapport a été déposé mais n’a pas encore été résolu . 

Vous pouvez essayer d'ajouter une bordure de la même couleur que votre arrière-plan pour essayer de minimiser l'effet.

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

Fait le truc pour le chrome.

6
Guido Gallenkamp

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

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

4
Luke Dennis

J'ai rencontré ce problème sur Chrome 33 (Windows 7). J'ai essayé tous les correctifs suggérés sur cette page. La misère s'ensuivit. Ma rotation était assez simple:

transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);

J'ai trouvé ceci réponse et après quelques essais rapides, j'ai trouvé que la combinaison suivante fonctionnait parfaitement dans Chrome:

-webkit-backface-visibility: hidden;
outline: 1px solid transparent;

Je n'ai pas encore testé cross browser. Je ne sais pas quels autres bugs cela introduit. Tu étais prévenu. J'espère que cela pointe quelqu'un dans la bonne direction.

Note latérale: Au cours de mes expériences, j'ai constaté que -webkit-backface-visibility: hidden; (seul) enlevait l'antialiasing des images non transformées.

3
Just Plain High

Ceci est un bogue WebKit qui a déjà été corrigé et le correctif doit apparaître dans Chrome 15 .

La solution de contournement jusqu'à ce que tout le monde passe à 15+ consiste à appliquer -webkit-backface-visibility: hidden; à l'élément en rotation. Travaillé pour moi Cela déclenche l'antialiasing sur l'élément.

2
Dmitry Leskov

Vous pouvez ajouter une zone d'ombre à vos images avec la même couleur que votre arrière-plan, réduisant ainsi l'effet.

exemple: http://antialiasing-webkit.qip.li/edit/

1
soufell

Cela ne conviendra pas à toutes les utilisations, mais si vous avez le contrôle sur le balisage et que vous ajoutez un <div> supplémentaire, vous pouvez utiliser le contenu généré pour nettoyer de manière spectaculaire les bords des images pivotées dans Chrome. Cela fonctionne car Chrome [ appliquera un anti-aliasing au contenu généré placé sur l'image.

Vous pouvez voir un exemple ici: http://jsfiddle.net/cherryflavourpez/2SKQW/2/

La première image n'a rien à faire, la seconde a une bordure appliquée pour correspondre à la couleur de fond - pas n'importe quelle différence que je peux voir.

La troisième image div a du contenu généré avec une bordure placée autour du bord. Vous perdez un pixel autour de l’Edge, mais c’est beaucoup mieux. Le CSS est assez explicite. Cela a l'avantage de ne pas vous obliger à créer la frontière à votre image, ce qui me semble être un prix trop élevé.

0
CherryFlavourPez

Pour moi, c'est la propriété CSS en perspective qui a fait l'affaire:

-webkit-perspective: 1000;

Complètement illogique dans mon cas, car je n'utilise pas de transitions 3D, mais fonctionne néanmoins.

0
Aron