WebKit: texte flou avec échelle css + translate3d
je vois un problème où Chrome et d'autres navigateurs WebKit brouillent massivement tout contenu à l'échelle css qui a également translate3d appliqué.
voici un violon JS: http://jsfiddle.net/5f6Wg / . (Afficher dans le navigateur 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>y a-t-il des solutions de rechange connues pour cela? Je reçois que dans l'exemple simple ci-dessus, je pourrais simplement utiliser traduire plutôt que translate3d - la le point ici est de dépouiller le code à l'essentiel.
8 réponses
Webkit traite les éléments transformés en 3d comme des textures au lieu de vecteurs afin de fournir une accélération 3D matérielle. La seule solution à cela serait d'augmenter la taille du texte et de réduire l'échelle de l'élément, en créant essentiellement une texture res plus élevée.
voir ici: http://jsfiddle.net/SfKKv /
notez qu'antialiasing est toujours insuffisant (les hampes sont perdues) donc je borde le texte avec un peu d'ombre de texte.
j'ai trouvé que l'utilisation:
-webkit-perspective: 1000;
sur le conteneur de votre police ou jeu d'icône a gardé les choses crisp pour moi après l'expérience avec la question sur Android nexus 4.2 pendant un certain temps.
un effet de filtre css est une opération graphique qui permet de manipuler l'apparence de tout élément HTML. Depuis Chrome 19 ces filtres sont GPU accélère pour les rendre super rapide.
CSS3 introduit un tas d'effets de filtre standard, l'un d'eux est le flou fitler:
-webkit-filter: blur(radius);
le paramètre’ radius ' affecte le nombre de pixels sur l'écran qui se fondent les uns dans les autres, donc une plus grande valeur va créer plus de flou. Zéro bien sûr laisse l'image inchangée.
définit le rayon à 0 forcera le navigateur à utiliser le calcul GPU et le forcera à garder votre élément html inchangé. C'est comme appliquer des effets "arêtes dures".
donc la meilleure solution pour moi afin de corriger cet effet flou était d'ajouter cette simple ligne de code:
-webkit-filter: blur(0);
il y a aussi un bug connu qui n'affecte que les écrans rétiniens. (Voir ici: pourquoi flou (0) ne supprime-t-il pas tout le texte flou dans Webkit/Chrome sur les écrans de rétine? ). Afin de rendre cela fonctionne aussi pour la rétine, je vous recommande d'ajouter cette deuxième ligne:
-webkit-transform: translateZ(0);
Essayez cette
...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
Ou pour une approche exacte, vous pouvez appeler une fonction javascript pour recalculer la matrice de transformation en supprimant les valeurs décimales de la matrice. voir: https://stackoverflow.com/a/42256897/1834212
j'ai rencontré 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 vomi dans un GitHub au cas où quelqu'un en profiterait. - https://github.com/charleshimmer/jquery-hirestext .
j'ai utilisé javascript pour déplacer le texte 1px haut et puis avec 100ms après, retour 1px vers le bas. Il est presque unperceptive et a résolu le problème complètement cross-browser.
body {
-webkit-font-smoothing: subpixel-antialiased;
}
ou je pense que vous pourriez mettre cela sur un élément spécifique, mais j'avais des problèmes avec un élément affectant l'ensemble du site.
je pense que c'est un problème avec les polices de caractères personnalisées.
Webkit traite les éléments transformés en 3d comme des textures au lieu de vecteurs afin de fournir une accélération 3D matérielle.
cela n'a rien à voir. Vous remarquerez que votre problème d'alias peut être corrigé par l'ajout d'informations sur la durée et la direction (par exemple 0.3 linear). Votre avoir une mare d'essayer de rendre tout à l'exécution:
idem pour ce qui précède"