Texte flou après l'utilisation de CSS transform: scale(); dans Chrome

Pour améliorer l'effet de flou, de l'esp. dans Chrome, essayez de faire cela:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

Mise à JOUR: Point de vue ajoute la distance entre l'utilisateur et le z-plane, qui, techniquement, les échelles de l'objet, ce qui le flou semble "permanent". Le perspective(1px) ci-dessus, c'est comme duck-tape parce que nous sommes correspondant à l'effet de flou que nous essayons de résoudre. Vous pourriez avoir plus de chance avec le css ci-dessous:

transform: translateZ(0);
backface-visibility: hidden;

Au lieu de

transform: scale(1.5);

à l'aide de

zoom : 150%;

corrige le texte flou problème dans Chrome.

Ce doit être un bug avec Chrome (Version 56.0.2924.87), mais le suivant corrige le flou pour moi lors de la modification des propriétés css dans la console('.0'). Je vais le signaler.

filter: blur(.0px)

J'ai découvert que le problème se passe sur les transformations relatives quelque sorte. translateX(50%), l'échelle(1.1) ou ce que jamais. fournir des valeurs absolues fonctionne toujours (ne produit pas de texte flou(ures)).

Aucune des solutions mentionne ici travaillé, et je pense qu'il n'y a pas de solution, mais (à l'aide de Chrome 62.0.3202.94 alors que j'écris).

Dans mon cas transform: translateY(-50%) translateX(-50%) causes de flou (je veux le centre d'une boîte de dialogue).

Pour atteindre un peu plus "absolue" des valeurs, j'ai dû mettre les valeurs décimales à transform: translateY(-50.09%) translateX(-50.09%).

NOTE

Je suis tout à fait sûr, que ces valeurs varient sur différentes tailles d'écran. Je voulais juste partager mes expériences, dans le cas où il aide quelqu'un.

Dans mon cas suivants du code causé floue police:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

et ajouter simplement la propriété zoom fixe pour moi. Jouer avec le zoom, à la suite fonctionné pour moi:

zoom: 97%;   

Ajoutant perspective(1px) a fonctionné pour moi.

transform: scale(1.005);

à

transform: scale(1.005) perspective(1px);

Aucun des ci-dessus a fonctionné pour moi.

Il a travaillé quand j'ai ajouté la perspective

c'est à dire de

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

j'ai changé pour

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

POUR CHORME:

J'ai essayé toutes les suggestions ici. Mais diden pas de travail.
Mon collège trouvé une excellente solution, qui fonctionne mieux:

Vous ne devriez PAS l'échelle passé 1.0

Et comprennent translateZ(0) en vol stationnaire, mais PAS dans le néant-hover/en position initiale.

Exemple:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Pour moi le problème c'est que mes éléments ont été à l'aide de transformStyle: preserve-3d. J'ai réalisé que ce n'était pas réellement nécessaire pour l'application et le retrait, il a fixé le degré de flou.

J'ai enlevé ce à partir de mon code - transform-style: preserve-3d;
et ajouté ce- transform: perspective(1px) translateZ(0);

le flou s'en alla!

2019 mise à Jour
Le Chrome bug d'affichage n'est toujours pas fixées, et bien que pas de la faute des patrons, aucun des suggestions offertes dans l'ensemble de ce site web, vous aider à résoudre le problème. Je peux d'accord pour dire que j'ai essayé à chaque un seul d'entre eux en vain: seulement 1 vient de fermer et c'est la règle css: filter:blur(0); ce qui élimine le déplacement d'un conteneur par 1px mais ne permet pas de résoudre les troubles de la bogue d'affichage du conteneur lui-même et de tout contenu qu'il peut avoir.

Voici la réalité: il n'est littéralement pas de solution à ce problème, voici donc un travail autour de liquide de sites web

CAS

Je suis actuellement à l'élaboration d'un fluide d'un site web et l'3 divs, tous centrés avec des effets de survol et de partage des valeurs en pourcentage de la largeur et de position. Le Chrome bug se produit sur le centre de conteneur qui est à gauche:50%; et transformer:translateX(-50%); un paramètre commun.

EXEMPLE: d'Abord le HTML...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Voici le CSS où le Chrome bug se produit...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Voici le fixe css...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Buggé violon: https://jsfiddle.net/m9bgrunx/2/

Fixe violon: https://jsfiddle.net/uoc6e2dm/2/

Comme vous pouvez le voir une petite quantité de peaufinage de la CSS à réduire ou à éliminer l'obligation d'utiliser la transformation pour le positionnement. Cela pourrait également s'appliquer à une largeur fixe de sites web ainsi que de liquide.

Le texte ne sera pas floue si vous n'avez pas transition la transform.

Viens de le faire:

&:hover {
    transform: scale(1.1);
}

Sans la transition
transition: all .2s;