Texte flou après utilisation de la transformation CSS: scale (); dans Chrome
On dirait qu’une récente mise à jour de Google Chrome provoque un texte flou après une opération transform: scale(). Plus précisément, je fais ceci:
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
Si vous visitez le site http://rourkery.com dans Chrome, le problème doit apparaître dans la zone de texte principale. Cela n'était pas le cas auparavant et cela ne semble pas affecter les autres navigateurs Web (comme Safari). Il y avait quelques autres articles sur des personnes rencontrant un problème similaire avec des transformations 3D, mais ne trouvant rien de tel sur les transformations 2D.
Toutes les idées seraient appréciées, merci!
J'ai eu ce problème un certain nombre de fois et il semble y avoir 2 façons de le résoudre (voir ci-dessous). Vous pouvez utiliser l'une ou l'autre de ces propriétés pour corriger le rendu, ou les deux en même temps.
La visibilité arrière masquée résout le problème car elle simplifie l'animation uniquement à l'avant de l'objet, alors que l'état par défaut est l'avant et l'arrière.
backface-visibility: hidden;
TranslateZ fonctionne également puisqu'il s'agit d'un hack permettant d'ajouter une accélération matérielle à l'animation.
transform: translateZ(0);
Ces deux propriétés résolvent le problème que vous rencontrez mais certaines personnes aiment aussi ajouter
-webkit-font-smoothing: subpixel-antialiased;
à leur animés à objecter. Je trouve que cela peut changer le rendu d'une police Web, mais n'hésitez pas à expérimenter aussi avec cette méthode.
J'ai trouvé que l'ajustement du rapport d'échelle a légèrement aidé.
L'utilisation de scale(1.048) sur (1.05) semblait générer une meilleure approximation d'une taille de police de pixel entier, réduisant ainsi le flou sous-pixel.
J'ai également utilisé translateZ(0), qui semble ajuster l'étape d'arrondi finale de Chrome dans l'animation de transformation. Ceci est un atout pour mon utilisation du survol, car il augmente la vitesse et réduit le bruit visuel. Pour une fonction onclick cependant, je ne l'emploierais pas car la police transformée ne semble pas être aussi nette.
Au lieu de
transform: scale(1.5);
en utilisant
zoom : 150%;
corrige le problème de flou du texte dans Chrome.
Sunderls m'amène à la réponse. Sauf que filter: scale n'existe pas, mais filter: blur existe.
Appliquez les déclarations suivantes aux éléments qui apparaissent flous (dans mon cas, ils étaient à l'intérieur d'un élément transformé):
backface-visibility: hidden;
-webkit-filter: blur(0);
Il presque a fonctionné parfaitement. " Presque " parce que j'utilise une transition et que pendant la transition, les éléments ne semblent pas parfaits, mais une fois la transition effectuée, ils le sont.
Pour améliorer le flou, esp. sur Chrome, essayez ceci:
transform: perspective(1px) translateZ(0);
backface-visibility: hidden;
Cela doit être un bogue avec Chrome (version 56.0.2924.87), mais ce qui suit résout le flou pour moi lors de la modification des propriétés css de la console ('. 0'). Je vais le signaler.
filter: blur(.0px)
J'ai découvert que le problème se produit de manière relative sur les transformations relatives. translateX (50%), scale (1.1) ou quoi que ce soit. fournir des valeurs absolues fonctionne toujours (ne produit pas de texte flou (ures)).
Aucune des solutions mentionnées ici n'a fonctionné et je pense qu'il n'y a pas encore de solution (utiliser Chrome 62.0.3202.94 pendant que j'écris ceci).
Dans mon cas, transform: translateY(-50%) translateX(-50%) provoque le flou (je veux centrer une boîte de dialogue).
Pour atteindre un peu plus de valeurs "absolues", je devais définir la valeur décimale sur transform: translateY(-50.09%) translateX(-50.09%).
REMARQUE
Je suis tout à fait sûr que ces valeurs varient en fonction de la taille de l'écran. Je voulais juste partager mes expériences, au cas où cela aiderait quelqu'un.
Essayez d'utiliser zoom: 101%; pour les conceptions complexes lorsque vous ne pouvez pas utiliser une combinaison de zoom + échelle.
Dans mon cas, le code suivant a causé une police floue:
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
et juste en ajoutant la propriété de zoom corrigé pour moi. Jouez avec le zoom, en suivant les travaux pour moi:
zoom: 97%;
J'ai trouvé une solution bien meilleure et propre:
.element{
transform:scale(0.5)
transform-Origin: 100% 0;
}
ou
.element{
transform:scale(0.5)
transform-Origin: 0% 0;
}
Merci à ce post: Prévenir le rendu flou avec transform: scale
Une autre solution à essayer que je viens de trouver pour les transformations floues (translate3d, scaleX) sur Chrome consiste à définir l'élément comme " display: inline-table ;". Cela semble forcer l’arrondi des pixels dans certains cas (sur l’axe X).
Je lisais que le positionnement des sous-pixels sous Chrome était prévu et que les développeurs ne le répareraient pas.
vous pouvez utiliser css filter pour résoudre ce problème.
.element {
filter: blur(0);
}
à propos du préfixe du vendeur, merci de le faire vous-même .-webkit-filter, -ms-filter ... le détail est ici http://browser.colla.me/show/css_transformation_scale_cause_blurring
J'ai utilisé une combinaison de toutes les réponses et voici ce qui a fonctionné pour moi à la fin:
.modal .modal--transition {
display: inline-table;
transform: perspective(1px) scale(1) translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
Aucune des réponses ci-dessus ne fonctionnait pour moi ... J'ai eu cette animation pour les popups:
@keyframes Pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
Dans mon cas, l’effet de flou avait disparu après l’application de cette règle: -webkit-perspective: 1000; même s’il était marqué comme inutilisé dans l’inspecteur Chrome.
J'ai corrigé mon cas en ajoutant:
transform: perspective(-1px)
Après avoir essayé tout le reste ici sans succès, ce qui a finalement résolu ce problème pour moi, c’est enlevant la propriété will-change: transform;. Pour une raison quelconque, cela provoquait une mise à l’échelle extrêmement floue dans Chrome, mais pas dans Firefox.
Dans Chrome 74.0.3729.169, en date du 25/05/19, il ne semble pas y avoir de solution pour le flou survenant à certains niveaux de zoom du navigateur causés par la transformation. Même un simple TransformY(50px) rendra l'élément flou. Cela ne se produit pas dans les versions actuelles de Firefox, Edge ou Safari, et cela ne semble pas se produire à tous les niveaux de zoom.
POUR CHORME:
J'ai essayé toutes les suggestions ici. Mais n'a pas fonctionné. Mon collège a trouvé une excellente solution, qui fonctionne mieux:
Vous ne devez PAS dépasser l'échelle 1.0
Et incluez translateZ(0) dans le survol, mais PAS dans la position initiale/sans survol.
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);
}
Le texte ne sera pas flou si vous n'avez pas transition le transform.
Faites juste ceci:
&:hover {
transform: scale(1.1);
}
Sans la transition comme transition: all .2s;
Pour moi, le problème était que mes éléments utilisaient transformStyle: preserve-3d. J'ai réalisé que cela n'était pas réellement nécessaire pour l'application et le supprimer a corrigé le flou.
J'ai enlevé ceci de mon code - transform-style: preserve-3d;.__ et ajouté ceci - transform: perspective(1px) translateZ(0);
le flou est parti!