transformation css, bords dentelés dans chrome
J'ai utilisé la transformation CSS3 pour faire pivoter les images et les zones de texte avec des bordures sur 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 a l'air beaucoup mieux parce que AA est utilisé (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 tournée et le texte lui-même ont l'air bien, ce n'est que 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:
Au cas où quelqu'un chercherait cela plus tard, une astuce intéressante pour se débarrasser de ces bords irréguliers des transformations CSS dans Chrome consiste à ajouter la propriété CSS -webkit-backface-visibility avec une valeur de hidden . Dans mes propres tests, cela les a complètement lissées. J'espère que ça t'as aidé.
-webkit-backface-visibility: hidden;
Si vous utilisez transition au lieu de transform, -webkit-backface-visibility: hidden; ne fonctionne 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;
Ajouter une bordure transparente de 1px déclenchera un anti-aliasing
outline: 1px solid transparent;
Vous pouvez également ajouter une ombre de boîte transparente de 1 px.
box-shadow: 0 0 1px rgba(255,255,255,0);
Essayez de transformer en 3D. Ça fonctionne super bien!
/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(2deg);
La réponse choisie (ni aucune des autres réponses) n'a pas fonctionné pour moi, mais cela a fonctionné:img {outline:1px solid transparent;}
J'ai eu un problème avec un dégradé CSS3 avec -45deg. Le background incliné, était gravement irrégulier, mais pire que le message original. J'ai donc commencé à jouer avec le background-size. Cela allongerait les déchirures, mais c'était toujours là. Puis, en plus, j'ai lu que d'autres personnes avaient des problèmes avec des incréments de 45 °, alors je me suis ajusté de -45deg à -45.0001deg et mon problème a été résolu.
Dans mon CSS ci-dessous, background-size était initialement 30px et deg pour le dégradé d'arrière-plan était exactement -45deg, et toutes les images clés étaient 30px 0.
@-webkit-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-moz-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-ms-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-o-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-webkit-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-moz-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-ms-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-o-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@keyframes progressStripeRTL {
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: progressStripeLTR .6s linear infinite;
-moz-animation: progressStripeLTR .6s linear infinite;
-ms-animation: progressStripeLTR .6s linear infinite;
-o-animation: progressStripeLTR .6s linear infinite;
animation: progressStripeLTR .6s linear infinite;
}
.pro-bar-candy.candy-rtl {
-webkit-animation: progressStripeRTL .6s linear infinite;
-moz-animation: progressStripeRTL .6s linear infinite;
-ms-animation: progressStripeRTL .6s linear infinite;
-o-animation: progressStripeRTL .6s linear infinite;
animation: progressStripeRTL .6s linear infinite;
}
Je pensais juste que nous inclurions notre solution aussi, car nous avions exactement le même problème sous Chrome/Windows.
Nous avons essayé la solution de @stevenWatkins ci-dessus, mais nous avions toujours le "pas à pas".
Au lieu de
-webkit-backface-visibility: hidden;
Nous avons utilisé:
-webkit-backface-visibility: initial;
Pour nous cela a fait l'affaire
Ajouter ce qui suit sur la div entourant l’élément en question corrige cela pour moi.
-webkit-transform-style: preserve-3d;
Les bords irréguliers apparaissaient autour de la fenêtre vidéo dans mon cas.
Vous pourrez peut-être masquer les irrégularités à l’aide de flou box-shadows . L'utilisation de -webkit-box-shadow à la place de box-shadow garantira que cela n'affecte pas les navigateurs autres que les kits Web. 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:
Pour le canevas dans Chrome (version 52)
Toutes les réponses énumérées concernent les images. Mais mon problème concerne le canevas dans chrome (v.52) avec transform rotation. Ils sont devenus déchiquetés et toutes ces méthodes ne peuvent pas aider.
Solution qui fonctionne pour moi:
- Agrandir la toile sur 1 px de chaque côté => +2 px pour la largeur et la hauteur;
- Dessine 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 à celle du document)
- Appliquer la rotation requise
Blocs de code donc 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>Exemple: https://jsfiddle.net/tLbxgusx/1/
Note: il y a beaucoup de divs imbriqués car c'est une version simplifiée de mon projet.
Ce problème est reproduit également pour Firefox pour moi. Il n'y a pas de problème de ce type sur Safari et FF avec rétine.
Et une autre solution trouvée consiste à placer canvas dans un div de même taille et à appliquer le css suivant à ce div:
overflow: hidden;
box-shadow: 0 0 1px rgba(255,255,255,0);
// Or
//outline:1px solid transparent;
Et la rotation devrait être appliquée à cette division d'emballage. La solution listée est donc travaillée mais avec de petites modifications.
Et exemple modifié pour une telle solution est: https://jsfiddle.net/tLbxgusx/2/
Note: Voir le style de div avec la classe 'troisième'.
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.