web-dev-qa-db-fra.com

WebKit: texte flou avec échelle css + translate3d

Je vois un problème dans lequel Chrome et les autres navigateurs WebKit brouillent massivement tout contenu à l'échelle css auquel a également été translate3d appliqué.

Voici un JS Fiddle: http://jsfiddle.net/5f6Wg/ . (Voir dans Chrome.)

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  /*-webkit-transform: scale(1.2);*/
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}
<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

Existe-t-il des solutions de contournement connues pour cela? Je comprends que dans l'exemple ci-dessus, je pourrais simplement utiliser translate plutôt que translate3d - le but ici est de supprimer le code pour l'essentiel.

css3webkitscaleblurrytranslate3d
55
phil

Webkit traite les éléments transformés en 3D en tant que textures au lieu de vecteurs afin de fournir une accélération 3D matérielle. La seule solution serait d’augmenter la taille du texte et de réduire l’échelle de l’élément, ce qui créerait une texture plus résistante.

Voir ici: http://jsfiddle.net/SfKKv/

Notez que l'anti-crénelage est encore en dessous de la normale (les tiges sont perdues), donc je renforce le texte avec un peu d'ombre.

33
methodofaction

J'ai trouvé cela en utilisant:

-webkit-perspective: 1000;

sur le conteneur de votre police ou de votre jeu d’icônes, les choses me sont restées claires après avoir essayé le problème sur Android nexus 4.2 pendant un certain temps).

33
hallodom

Un effet de filtre css est une opération graphique qui permet de manipuler l'apparence de tout élément HTML. Depuis le chrome 19, ces filtres sont accélérés par GPU pour les rendre super rapides.

CSS3 introduit de nombreux effets de filtres standard, dont le flou fitler:

-webkit-filter: blur(radius);

Le paramètre ‘rayon’ affecte le nombre de pixels à l’écran qui se fondent les uns dans les autres, ainsi une valeur plus grande créera plus de flou. Zéro bien sûr laisse l'image inchangée.

Définir le rayon sur 0 obligera le navigateur à utiliser le calcul GPU et à conserver l’élément HTML inchangé. C'est comme appliquer un effet "bords durs".

Donc, la meilleure solution pour résoudre cet effet flou consistait à ajouter cette simple ligne de code:

-webkit-filter: blur(0);

Il existe également un bogue connu qui n’affecte que les écrans de rétine. (Voir ici: Pourquoi le flou (0) ne supprime-t-il pas tout le flou du texte dans Webkit/Chrome sur les écrans de la rétine? ). Donc, pour que cela fonctionne aussi pour la rétine, je recommande d'ajouter cette deuxième ligne:

-webkit-transform: translateZ(0);
29
maoosi

Essaye ça

 ...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}

Ou, pour une approche plus précise, vous pouvez appeler une fonction javascript afin de recalculer la matrice de transformation en supprimant les valeurs décimales de la matrice. voir: https://stackoverflow.com/a/42256897/1834212

5
Miguel

Je suis tombé sur ce problème en utilisant le plugin isotope (http://isotope.metafizzy.co/index.html) en combinaison avec le plugin zoom (http://janne.aukia.com/zoomooz/). J'ai construit un plugin JQuery pour gérer mon cas. Je l'ai jeté dans un dépôt github au cas où quelqu'un pourrait en bénéficier. - https://github.com/charleshimmer/jquery-hirestext .

2
chuckles

J'ai utilisé javascript pour déplacer le texte 1px en haut, puis avec 100 ms après, vers le bas 1px. C'est presque pas perceptif et résolu le problème complètement cross-browser.

0
Mixtelf