WebKit: texte Flou avec css échelle + translate3d

Question

Je vois un problème où le Chrome et d'autres navigateurs WebKit massivement flou css à l'échelle du contenu qui a également translate3d appliquée.

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

<div class="test">
    <div class="testInner">
        This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
    </div>
</div>

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

    .testInner
    {
        /*-webkit-transform: scale(1.2);*/
        -webkit-transform: scale3d(1.2, 1.2, 1);
        text-align: center;
    }
</style>

Existe-il des solutions connues pour ce faire? Je reçois que dans l'exemple simple ci-dessus, je pourrais simplement utiliser traduire plutôt que translate3d - le point ici est de dépouiller le code à l'essentiel.

Answer 1

J'ai trouvé que l'utilisation de:

-webkit-perspective: 1000;

sur le contenant de votre police ou de jeu d'icônes gardé les choses croustillantes pour moi, après l'expérience avec la question sur Android nexus 4.2 pendant un certain temps.

Answer 2

Webkit traite 3d transformé éléments que les textures au lieu de vecteurs dans le but de fournir de l'accélération 3d matérielle. La seule solution à ce problème serait d'augmenter la taille du texte et d'en réduire l'élément, dans l'essence de la création d'un supérieur res de la texture.

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

Notez que l'anticrénelage est encore underpar (tiges sont perdues) je suis donc le renforcement de la texte avec un peu de l'ombre du texte.

Answer 3

Je suis tombé sur ce problème lors de l'utilisation de l'isotope plugin (http://isotope.metafizzy.co/index.html) en combinaison avec le zoom plugin (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 dans le cas où tout le monde pourrait en profiter. - https://github.com/charleshimmer/jquery-hirestext.

Answer 4

body {
-webkit-font-smoothing: subpixel-antialiased;
}

ou je pense que vous pourriez le mettre sur un élément spécifique, mais j'ai eu des problèmes avec l'un des éléments qui affectent l'ensemble du site.

Je pense que c'est un problème avec la coutume police des polices.

Answer 5

Webkit traite 3d transformé éléments que les textures au lieu de vecteurs dans le but de fournir de l'accélération 3d matérielle.

Cela n'a rien à faire avec elle. Vous remarquerez que votre problème d'aliasing peut être résolu avec l'ajout de la durée et la direction de l'information par exemple de 0,3 linéaire. Votre avoir une mare d'essayer de rendre tout à l'exécution:

De même pour le au-dessus de ^