J'ai utilisé la transformation CSS3 pour faire pivoter des images et des zones de texte avec des bordures dans mon site Web.
Le problème est que la bordure est dentelée dans Chrome, comme un jeu (basse résolution) sans anti-crénelage. Dans IE, Opera et FF, cela semble beaucoup mieux car AA est utilisé (ce qui est toujours clairement visible mais pas si mal). Je ne peux pas tester Safari car je ne possède pas de Mac.
La photo pivotée et le texte lui-même ont l'air bien, seule la bordure est dentelée.
Le CSS que j'utilise est le suivant:
.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:
Réponses:
Au cas où quelqu'un chercherait cela 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 dehidden
. Dans mes propres tests, cela les a complètement lissés. J'espère que cela pourra aider.la source
padding: 1px; -webkit-background-clip: content-box;
padding: 1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-background-clip:content-box;background-clip:content-box;
Si vous utilisez
transition
au lieu detransform
,-webkit-backface-visibility: hidden;
ne fonctionne pas. Un bord dentelé apparaît pendant l'animation pour un fichier png transparent.Pour le résoudre, j'ai utilisé:
outline: 1px solid transparent;
la source
L'ajout d'une bordure transparente 1px déclenchera l'anti-aliasing
Alternativement, ajoutez une ombre transparente transparente de 1px.
la source
outline: 1px solid transparent;
a bien fonctionné pour moi. Les autres solutions ci-dessus ne fonctionnaient pas assez bien.outline: 1px solid transparent;
déclencher l'anti-aliasing également dans Firefox 52 (qui a les mêmes problèmes que Chrome)Essayez la transformation 3D. Ça fonctionne super bien!
la source
preserve-3d
;rotate
peut toujours être utilisée sans passer àrotateZ
) le fait.La réponse choisie (ni aucune des autres réponses) n'a pas fonctionné pour moi, mais cela a:
img {outline:1px solid transparent;}
la source
J'ai eu un problème avec un gradient CSS3 avec -45deg. Le
background
slanted, était mal dentelé similaire mais pire que le poste d'origine. J'ai donc commencé à jouer avec les deuxbackground-size
. Cela étirerait la déchirure, mais elle était toujours là. Ensuite, en plus, j'ai lu que d'autres personnes avaient également des problèmes à des incréments de 45 degrés, j'ai donc ajusté de-45deg
à-45.0001deg
et mon problème a été résolu.Dans mon CSS ci-dessous,
background-size
était initialement30px
et ledeg
dégradé d'arrière-plan était exactement-45deg
, et toutes les images clés l'étaient30px 0
.la source
Vous pourrez peut-être masquer les irrégularités en utilisant des ombres de boîte floues . L'utilisation de -webkit-box-shadow au lieu de box-shadow garantira que cela n'affectera pas les navigateurs non-webkit. Vous voudrez peut-être vérifier Safari et les navigateurs Webkit mobiles.
Le résultat est un peu meilleur, mais toujours beaucoup moins bon qu'avec les autres navigateurs:
la source
Je pensais juste que nous jetterions aussi notre solution car nous avions exactement le même problème sur Chrome / Windows.
Nous avons essayé la solution de @stevenWatkins ci-dessus, mais nous avons toujours eu le "stepping".
Au lieu de
Nous avons utilisé:
Pour nous, cela a fait l'affaire 🎉
la source
L'ajout de ce qui suit sur le div entourant l'élément en question a corrigé cela pour moi.
Les bords dentelés apparaissaient autour de la fenêtre vidéo dans mon cas.
la source
Pour moi, c'est la propriété CSS en perspective qui a fait l'affaire:
Complètement illogique dans mon cas car je n'utilise pas de transitions 3D, mais fonctionne quand même.
la source
Pour canvas en Chrome (Version 52)
Toutes les réponses répertoriées concernent les images. Mais mon problème concerne le canevas en chrome (v.52) avec transformation rotation. Ils sont devenus irréguliers et toutes ces méthodes ne peuvent pas aider.
Solution qui fonctionne pour moi:
Blocs de code si importants:
Exemple: https://jsfiddle.net/tLbxgusx/1/
Remarque: il y a beaucoup de divs imbriqués car c'est une version simplifiée de mon projet.
Ce problème est également reproduit pour Firefox pour moi. Il n'y a pas un tel problème sur Safari et FF avec rétine.
Et une autre solution fondée consiste à placer le canevas dans un div de même taille et à appliquer le CSS suivant à ce div:
Et la rotation doit être appliquée à cette div enveloppante. La solution listée est donc travaillée mais avec de petites modifications.
Et l'exemple modifié d'une telle solution est: https://jsfiddle.net/tLbxgusx/2/
Remarque: Voir le style de div avec la classe «troisième».
la source