web-dev-qa-db-fra.com

Anti-aliasing de texte bizarre lors de la rotation avec webkit-transform dans Chrome

Je tourne un élément en utilisant -webkit-transform: rotate() et dans Chrome 14.0.835.2 dev-m, il fait des trucs vraiment bizarres sur le texte à l'intérieur de l'élément. Cela me rappelle un effet similaire que vous obtenez dans Photoshop lorsque vous faites pivoter le texte en utilisant l'anti-aliasing "lisse" au lieu de "net".

Quelqu'un sait ce qui se passe ici? Est-il spécifique à ce webkit ou Chrome ou est-ce que je peux faire quelque chose pour le réparer? (Ce n'est pas non plus un anti-crénelage des frontières entre les éléments de la liste)

Wonky text

Voici le CSS:

div.right-column.post-it
{
  position: relative;
  width: 240px;
  background-color: #fe9;
  padding: 20px;
  -webkit-transform: rotate(.7deg);
  background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
  box-shadow: 1px 1px 0 #ddccaa, 
            2px 2px 0 #dbcaa8,
            3px 3px 0 #d9c8a6,
            4px 4px 0 #d7c6a4,
            5px 5px 0 #d5c4a2,
            6px 6px 1px #d3c2a0,
            4px 4px 2px rgba(90,70,50,.5),
            8px 8px 3px rgba(90,70,50,.3),
            12px 12px 5px rgba(90,70,50,.1);
}
csswebkitrotationwebkit-transform
30
Rahul

Essayez de déclencher le mode de transformation 3D CSS avec webkit. cela change la façon chrome rend

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

éditer

Il existe également une déclaration de style Webkit uniquement -webkit-font-smoothing qui prend les valeurs

  • none
  • subpixel-antialiased
  • antialiased

où subpixel-antialiased est la valeur par défaut.

Hélas, l'antialias sous-pixel n'est pas une bonne solution pour le texte tourné. La machine de rendu ne peut pas gérer cela. La transformation 3D passe simplement à antialiased. Mais nous pouvons essayer de le régler directement.

Voir ici http://maxvoltar.com/archive/-webkit-font-smoothing

72
yunzen

Les polices floues sont causées par un problème de webkit étrange impliquant -webkit-backface-visibilité. Cela m'a pris une éternité à comprendre, et je ne l'ai encore vu nulle part ailleurs sur le Web.

J'ajoute maintenant -webkit-backface-visibilité: caché; au corps de mon site comme un style de réinitialisation CSS. Regardez-la affiner les polices sur l'ensemble de votre site, c'est incroyable. Vos transformations ne sont pas en 3D, cela n'affectera donc rien de toute façon, mais si vous décidez de faire des transformations en 3D ailleurs sur votre site, ajoutez simplement back -webkit-backface-visible: visible; à l'élément spécifique. Devrait également corriger le scintillement aussi.

16
DMTintner