web-dev-qa-db-fra.com

La police Chrome apparaît floue

Ça me fait des yeux!

semble bien dans IE et Firefox

enter image description here

Chrome (ci-dessus)

L'exécution de la version 39 de chrome, Apparaît floue dans une boîte modale; cela ne fait aucune différence si je change de famille de polices.

C’est le CSS (pour le libellé "Démarrer") que le navigateur affiche comme suit

box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: default;
display: block;
float: left;
font-family: sans-serif;
font-size: 12px;
font-weight: 600;
height: 24px;
line-height: 17.142858505249px;
margin-bottom: 0px;
margin-top: 0px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 7px;
position: relative;
text-align: right;
visibility: visible;
width: 89.65625px;

Est-ce le navigateur ou CSS?

--METTRE À JOUR---

Ok on dirait que c'est ça CSS

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto !important;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%); <--- This line
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

Cependant, si je le sors, mon centre n'est plus centré?

cssgoogle-chrome
39
D-W

J'ai rencontré le même problème sur le chrome après l'application de la conversion à l'un de mes éléments. Cela semble être un bug sur le chrome. La seule chose qui a fonctionné pour moi était la suivante: 

#the_element_that_you_applied_translate_to {
  -webkit-filter: blur(0.000001px);
}

Une autre solution peut consister à activer le rendu des polices en douceur:

#the_element_that_you_applied_translate_to {
  -webkit-font-smoothing: antialiased;
}
29
Iman Mohamadi

J'ai résolu ce problème en soustrayant 0,5 px de la valeur de l'axe des ordonnées. Donc à la place de faire:

transform: translateX(-50%) translateY(-50%);

J'ai fait ça:

transform: translateX(-50%) translateY(calc(-50% - .5px));

Cela a résolu le problème pour moi et je trouve que c'est une solution plus propre, puis je bidouille avec le pourcentage ou j'utilise Javascript.

25
arjansmeets

Ce violon teste différentes solutions from: 

Test de sortie

CSS Output

Fix 0

-webkit-transform: translateZ(0);
transform: translateZ(0);

Fix 3

-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;
19
JSuar

_ {La seule façon correcte de résoudre ceci:} _

Ce problème provient du fait d'utiliser des valeurs% pour aligner les divs en utilisant des transformations css. Il en résulte des valeurs de sous-pixels décimaux, que votre écran ne peut pas restituer correctement. La solution consiste à normaliser la matrice de transformation obtenue.

Cela pourrait mieux fonctionner pour les divs fixes qui ne transforment pas l’animation. Mais si vous animez, vous pouvez utiliser un rappel après fin à cette fonction pour corriger l'état final.

(Donc:} _ Matrice (1,0,0,1, -375, -451.5) deviendrait matrice (1,0,0,1, - 375, -451)

J'appelle cette méthode avant le .show () de jquery ... Ou peut-être une fois dans l'application (selon votre cas), vous devrez peut-être également appeler cela lors de l'événement de redimensionnement, etc.

function roundCssTransformMatrix(element){
        var el = document.getElementById(element);
        el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
        var mx = window.getComputedStyle(el, null); //gets the current computed style
        mx = mx.getPropertyValue("-webkit-transform") ||
             mx.getPropertyValue("-moz-transform") ||
             mx.getPropertyValue("-ms-transform") ||
             mx.getPropertyValue("-o-transform") ||
             mx.getPropertyValue("transform") || false;
        var values = mx.replace(/ |\(|\)|matrix/g,"").split(",");
        for(var v in values) { values[v]=v>4?Math.ceil(values[v]):values[v]; }

        $("#"+element).css({transform:"matrix("+values.join()+")"});

}

et l'appelle 

roundCssTransformMatrix("MyElementDivId");
$("#MyElementDivId").show();

Beau n'est-ce pas?

Si vous devez mettre à jour le redimensionnement, vous pouvez le faire avec:

$( window ).resize(function() {
  roundCssTransformMatrix("MyElementDivId");  
});

Pour que cela fonctionne, tous les parents doivent "être alignés/normalisés" parce que si vous avez par exemple le corps avec x = 10.1px à gauche, et le l'enfant a 10 pixels. le problème ne disparaît pas car le parent a des nombres décimaux résiduels sur sa matrice Vous devez donc appliquer cette fonction à chaque élément parent et utilise transformer.

Vous pouvez voir ce script en direct ici: https://jsbin.com/fobana/edit?html,css,js,output

7
Miguel

Merci pour l'exemple CSS. Il semble que translateX(50%) et translateY(50%) calculent une valeur de pixel avec une décimale (par exemple, 0.5px), ce qui entraîne un rendu inférieur au pixel.

Il existe de nombreux correctifs, mais si vous souhaitez conserver la qualité du texte, la meilleure solution consiste à utiliser -webkit-font-smoothing: subpixel-antialiased; sur .md-modal pour forcer l'état de rendu des navigateurs Webkit tels que Chrome et Safari.

5
BurpmanJunior

J'ai fini par résoudre ce problème en supprimant ces lignes:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
3
Jezen Thomas

Il m'a fallu un certain temps pour trouver une solution que je ne prendrais pas la peine d'utiliser, je vais donc la poster ici.

Le problème pour moi était que l'enfant div avait les propriétés width et height avec une combinaison qui était à l'origine du problème.

Comme j'ai changé le height pour une autre valeur, cela a juste fonctionné! 

Cela a probablement à voir avec les autres réponses, mais je ne voulais pas utiliser de JS ni modifier la propriété de transformation pour la réparer.

Voici un exemple en direct: JSFIDDLE

2
Airton Gessner

Pour les boîtes modales, ce css aidera:

-webkit-transform: translate3d(-50%, -51%, 0);
-moz-transform: translate3d(-50%, -51%, 0);
transform: translate3d(-50%, -51%, 0);

Au lieu de placer l’axe Y à 50%, fixez-le à 51%. Cela aide dans mon cse . Si vous avez un positionnement différent, jouez, mais généralement 1% de haut/bas corrige le contenu flou.

2
Dušan

Une autre cause peut être que vous ne fournissez pas les poids de police nécessaires que vous utilisez.

Par exemple, si vous souhaitez utiliser à la fois Lato ou Roboto, vous souhaitez inclure plus que le poids standard. Cet exemple s'applique si vous utilisez l'API Google Font:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,900|Roboto:500,700">

Remarque: Lato est disponible en tailles de 100, 300, 400, 700 et 900, mais je devais spécifier 900 pour que mon texte 700 devienne net ... je ne sais pas pourquoi.

0
kashiraja

Ajouter une transition CSS à l’élément parent de l’élément parent de mon élément flou (qui utilisait transformX pour provoquer le flou) annule en réalité le flou incriminé.

0
Ol Tron

Le problème similaire est arrivé pour moi.

J'ai essayé avec toutes les méthodes suggérées, aucune ne fonctionnait bien. Cependant, finalement, j’ai résolu le problème . Comme il existe un problème avec google chrome ayant font-weight:600 ou plus . Essayez de remplacer la police de caractères par font-family:"Webly Sleek SemiBold","Helvetica";.

La propriété font-weight fonctionnera bien pour elle.

Blur_Font

Without_Blur

0
Knowledge hunt