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

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

-webkit-perspective: 1000;

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

Answer 2

Pour le canevas dans Chrome (Version 52)

Toutes les réponses énumérées concernent les images. Mais mon problème concerne les canvas dans chrome (v.52) avec transform rotate. Les images sont devenues irrégulières et toutes ces méthodes ne peuvent pas aider.

Solution qui fonctionne pour moi :

1. Agrandir la toile de 1 px pour chaque côté => +2 px pour la largeur et la hauteur ;
2. Dessiner une image avec un décalage de + 1px (en position 1,1 au lieu de 0,0) et une taille fixe (la taille de l'image doit être inférieure de 2px à la taille du canevas).
3. Appliquer la rotation requise

Des blocs de code très importants :

// Unfixed version
ctx.drawImage(img, 0, 0, 335, 218);
// Fixed version
ctx.drawImage(img, 1, 1, 335, 218);

/* This style should be applied for fixed version */
canvas {
  margin-left: -1px;
  margin-top:-1px;
}        

<!--Unfixed version-->
<canvas width="335" height="218"></canvas>
<!--Fixed version-->
<canvas width="337" height="220"></canvas>

Échantillon : https://jsfiddle.net/tLbxgusx/1/

Note : il y a beaucoup de divs imbriquées car il s'agit d'une version simplifiée de mon projet.

---

Ce numéro est reproduit aussi pour Firefox pour moi. Il n'y a pas de problème de ce type sur Safari et FF avec retina.

Et autre solution fondée est de placer le canevas dans une div de même taille et d'appliquer le code CSS suivant à cette div :

overflow: hidden;
box-shadow: 0 0 1px rgba(255,255,255,0);
// Or
//outline:1px solid transparent;

Et la rotation doit être appliquée à cette div enveloppante. La solution listée fonctionne donc, mais avec une petite modification.

L'exemple modifié de cette solution est le suivant : https://jsfiddle.net/tLbxgusx/2/

Note : Voir le style de la div avec la classe "third".