WebKit: texte Flou avec css échelle + translate3d

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.)

CSS:

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

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

HTML:

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

Sont-ils connus et des solutions de contournement pour cela? 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.

  • Même sur firefox
  • je pense que c'est résolu, n'a pas l'air flou pour moi
  • Un petit addittion: dans le dernier Chrome je coincé avec un problème comme lors de l'utilisation de pas de valeurs arrondies pour translate3d. En les arrondissant fixe tous les blurr pour moi.
InformationsquelleAutor phil | 2011-11-05
  1. 33

    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 texture.

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

    Noter 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.

    • Super utile, merci!
    • il sera beaucoup plus lent sur mobile webkits alors?
    • Excellente solution, qui ressemble un peu à une rétine solution, mais alors pour les ordinateurs de bureau. Aime l'idée, la mise en œuvre de ce droit maintenant, super-accessoires.
    • A l'air assez terrible pour moi, dans la Version de Chrome 54.0.2840.71 m (64-bit)
    InformationsquelleAutor methodofaction
  2. 33

    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.

    • Dang, qui l'a fait! Avec -webkit-transform: translate3d(0,0,0). La lettre des formes apparaissaient en place dans une drôle de façon, à la fin de l'échelle, et ce qu'il est corrigé. Essayé tout le reste sous le soleil.
    • Suppose que c'est parce que ces propriétés de déclenchement de l'accélération GPU, aussi l'augmentation des performances des transitions sur les éléments! 🙂
    • Cette solution doit être marqué comme un droit de réponse.
    • Il l'a fait pour moi!!
    • je ne pense pas que l'OP voulait une solution mobile. Et sur le bureau, il ne fait rien. Je upvoted cette réponse, mais c'est tout.
    • D'accord avec @Mtz, ne fonctionne pas sur le bureau (Chrome).
    • J'ai aussi besoin de -webkit-transform: translate3d(0,0,0)

    InformationsquelleAutor hallodom
  3. 29

    Un css effet de filtre est une interface graphique qui permet de manipuler l'apparence de n'importe quel élément HTML. Depuis Chrome 19 ces filtres sont GPU accélère afin de les rendre super rapide.

    CSS3 introduit un tas de standard des effets de filtre, l'un d'eux est le flou fitler:

    -webkit-filter: blur(radius);

    Le "rayon" paramètre affecte le nombre de pixels sur l'écran se fondre dans l'autre, donc une plus grande valeur créera de plus en plus flou. Zéro bien sûr, les feuilles de l'image inchangée.

    Définir le rayon de 0 va forcer le navigateur à utiliser le GPU de calcul et de le forcer à garder votre élément html inchangé. C'est comme l'application d'une "bords durs" des effets.

    Donc, la meilleure solution pour moi pour résoudre ce flou qui a pour effet d'ajouter à cette simple ligne de code:

    -webkit-filter: blur(0);

    Il y a aussi un bug connu qui affecte uniquement les écrans retina. (Voir ici: Pourquoi ne pas flou(0) supprimer tout le texte flou dans Webkit/Chrome sur la rétine des écrans?). Afin de rendre cela fonctionne aussi pour la rétine, je vous recommande d'ajouter cette deuxième ligne:

    -webkit-transform: translateZ(0);
    • veuillez donner quelques explications pour votre réponse
    • Comme une note à l'application de flou à la volée dans les outils de dev ne semble pas avoir le même effet que d'être là au chargement de la page. Pas sûr si c'était juste moi, mais ce peut être la réponse que vous cherchez, juste recharger la page.
    • Après avoir essayé TOUT le reste sur une recherche google c'était le correctif. Merci!!!!
    • Vous êtes les bienvenus 😉
    • cela a fonctionné pour moi! .modal { max-width: calc(100% - 50px); max-height: calc(100% - 50px); position: fixed; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: traduire(-50%, -50%); -webkit-filter: blur(0); overflow: hidden; }
    • Génial, merci!
    • maoosi la réponse de l'habitude de travailler pour moi, mais quelque chose semble avoir changé, car il ne fonctionne plus dans la plus récente de google Chrome?

    InformationsquelleAutor maoosi
  4. 5

    Essayer 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

    • pour moi tout zoom: 1.005; bien fonctionné. pas besoin d'utiliser scale
    InformationsquelleAutor Miguel
  5. 2

    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.

    InformationsquelleAutor chuckles
  6. 0

    J'ai utilisé du javascript pour déplacer le texte 1px de haut et puis avec 100ms après, de retour 1px vers le bas. C'est presque unperceptive et résolu complètement le problème de la croix-navigateur.

    InformationsquelleAutor Mixtelf
  7. -1
    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.

    • Conscients que vous essayez d'ajouter de la valeur ici, mais le JS Fiddle je n'est pas utiliser une police personnalisée, et -webkit-font-smoothing ne semble pas faire de différence. Cela fonctionne pour vous dans la Tripoter ci-dessus?
    • sous-pixel-crénelage de la police de lissage est maintenant par défaut dans google Chrome.
    InformationsquelleAutor placeboaddict
  8. -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.

    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 ci-dessus ^

    • Désolé Tom, mais je n'ai aucune idée de ce à quoi vous faites référence. Parlez-vous de l'ajout d'une animation? (L'intention était simplement de l'échelle, de ne pas les animer quoi que ce soit.) Si vous modifiez l'original JS Fiddle, peut-être que ça aiderait.
    • Depuis que je suis en utilisant une transition, j'ai ajouté de la durée et de la direction. Le flou persiste encore.
    InformationsquelleAutor Tom