css transformer, bords déchiquetés en chrome

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 semble irrégulière dans Chrome, comme un jeu (basse résolution) sans anti-aliasing. 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 parce que je ne possède pas de Mac.

La photo pivotée et le texte lui-même ont l’air bien, c’est seulement la bordure qui semble déchiqueté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 */ } 

Est-il possible de résoudre ce problème, par exemple en forçant Chrome à utiliser AA?

Exemple ci-dessous:

Exemple de bords dentelés

    Au cas où quelqu’un le rechercherait plus tard, une bonne astuce pour se débarrasser de ces bords irréguliers sur les transformations CSS dans Chrome consiste à append la propriété CSS -webkit-backface-visibility avec une valeur hidden . Dans mes propres tests, cela les a complètement lissés. J’espère que cela pourra aider.

     -webkit-backface-visibility: hidden; 

    Si vous utilisez une transition au lieu d’une transform , -webkit-backface-visibility: hidden; ne marche pas. Un bord irrégulier apparaît pendant l’animation pour un fichier png transparent.

    Pour le résoudre, j’ai utilisé: outline: 1px solid transparent;

    Essayez la transformation 3D. Ça fonctionne super bien!

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

    L’ajout d’une bordure transparente 1px déclenchera l’anti-aliasing

     outline: 1px solid transparent; 

    Vous pouvez également append une ombre de boîte transparente 1px.

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

    La réponse choisie (ni aucune des autres réponses) n’a pas fonctionné pour moi, mais cela a fait:

    img {outline:1px solid transparent;}

    J’ai eu un problème avec un dégradé CSS3 avec -45deg. L’ background incliné était très irrégulier, mais pire que le message original. J’ai donc commencé à jouer à la fois avec la background-size . Cela étirerait la dentelure, mais c’était toujours là. Puis, en plus, j’ai lu que d’autres personnes avaient des problèmes avec des incréments de -45deg -45.0001deg donc j’ai ajusté de -45deg à -45.0001deg et mon problème a été résolu.

    Dans mon CSS ci-dessous, la background-size était initialement de 30px et le deg du dégradé d’arrière-plan était exactement de -45deg , et toutes les images clés étaient de 30px 0 .

      @-webkit-keyframes progressSsortingpeLTR { to { background-position: 60px 0; }; } @-moz-keyframes progressSsortingpeLTR { to { background-position: 60px 0; }; } @-ms-keyframes progressSsortingpeLTR { to { background-position: 60px 0; }; } @-o-keyframes progressSsortingpeLTR { to { background-position: 60px 0; }; } @keyframes progressSsortingpeLTR { to { background-position: 60px 0; }; } @-webkit-keyframes progressSsortingpeRTL { to { background-position: -60px 0; }; } @-moz-keyframes progressSsortingpeRTL { to { background-position: -60px 0; }; } @-ms-keyframes progressSsortingpeRTL { to { background-position: -60px 0; }; } @-o-keyframes progressSsortingpeRTL { to { background-position: -60px 0; }; } @keyframes progressSsortingpeRTL { to { background-position: -60px 0; }; } .pro-bar-candy { width: 100%; height: 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: rgb(187, 187, 187); background: -moz-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -webkit-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -o-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -ms-linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: linear-gradient( -45.0001deg, rgba(187, 187, 187, 1.00) 25%, transparent 25%, transparent 50%, rgba(187, 187, 187, 1.00) 50%, rgba(187, 187, 187, 1.00) 75%, transparent 75%, transparent ); background: -webkit-gradient( linear, right bottom, right top, color-stop( 25%, rgba(187, 187, 187, 1.00) ), color-stop( 25%, rgba(0, 0, 0, 0.00) ), color-stop( 50%, rgba(0, 0, 0, 0.00) ), color-stop( 50%, rgba(187, 187, 187, 1.00) ), color-stop( 75%, rgba(187, 187, 187, 1.00) ), color-stop( 75%, rgba(0, 0, 0, 0.00) ), color-stop( rgba(0, 0, 0, 0.00) ) ); background-repeat: repeat-x; -webkit-background-size: 60px 60px; -moz-background-size: 60px 60px; -o-background-size: 60px 60px; background-size: 60px 60px; } .pro-bar-candy.candy-ltr { -webkit-animation: progressSsortingpeLTR .6s linear infinite; -moz-animation: progressSsortingpeLTR .6s linear infinite; -ms-animation: progressSsortingpeLTR .6s linear infinite; -o-animation: progressSsortingpeLTR .6s linear infinite; animation: progressSsortingpeLTR .6s linear infinite; } .pro-bar-candy.candy-rtl { -webkit-animation: progressSsortingpeRTL .6s linear infinite; -moz-animation: progressSsortingpeRTL .6s linear infinite; -ms-animation: progressSsortingpeRTL .6s linear infinite; -o-animation: progressSsortingpeRTL .6s linear infinite; animation: progressSsortingpeRTL .6s linear infinite; } 

    Vous pourrez peut-être masquer le crissement en utilisant des ombres-boîtes floues. Utiliser -webkit-box-shadow au lieu de shadow-box s’assurera que cela n’affecte pas les navigateurs non-webkit. Vous pourriez vouloir vérifier Safari et les navigateurs Webkit mobiles cependant.

    Le résultat est un peu meilleur, mais toujours beaucoup moins bon avec les autres navigateurs:

    avec boîte ombre (dessous)

    Je pensais juste que nous lancerions aussi notre solution car nous avions exactement le même problème sur Chrome / Windows.

    Nous avons essayé la solution par @stevenWatkins ci-dessus, mais nous avions toujours le “stepping”.

    Au lieu de

     -webkit-backface-visibility: hidden; 

    Nous avons utilisé:

     -webkit-backface-visibility: initial; 

    Pour nous, cela a fait l’affaire 🎉

    L’ajout de ce qui suit sur le div entourant l’élément en question a corrigé cela pour moi.

     -webkit-transform-style: preserve-3d; 

    Les bords irréguliers apparaissaient autour de la fenêtre vidéo dans mon cas.

    Pour moi, c’était la propriété CSS de perspective qui a fait l’affaire:

     -webkit-perspective: 1000; 

    Complètement illogique dans mon cas car je n’utilise pas de transitions 3D, mais ça marche quand même.

    Pour la canvas dans Chrome (version 52)

    Toutes les réponses répertoriées concernent les images. Mais mon problème concerne la canvas en chrome (v.52) avec transformation en rotation. Ils sont devenus déchiquetés et toutes ces méthodes ne peuvent pas aider.

    Solution qui fonctionne pour moi:

    1. Faire une canvas plus grande sur 1 px pour chaque côté => +2 px pour la largeur et la hauteur;
    2. Tracez l’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 2 fois à la taille du canevas)
    3. Appliquer la rotation requirejse

    Des blocs de code si 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; }