wake-up-neo.net

Chrome Font erscheint verschwommen

Es tut mir in die Augen!

sieht gut aus in IE und Firefox

enter image description here

Chrome (oben)

Wenn Version 39 von Chrome ausgeführt wird, erscheint Nur in einer modalen Box undeutlich.

Dies ist das CSS (für Label "Start"), das der Browser das Folgende darstellt

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;

Ist es der Browser oder CSS?

--AKTUALISIEREN---

Ok sieht aus wie dieses 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%);
}

Aber wenn ich es herausnehme, zentriert mein Modal nicht mehr?

39
D-W

Ich habe das gleiche Problem mit Chrome erlebt, nachdem ich eines meiner Elemente translate transform angewendet hatte. Es scheint ein Fehler auf Chrom zu sein. Das einzige, was für mich funktionierte, war folgendes: 

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

Eine andere Lösung kann das reibungslose Rendern von Schriftarten aktivieren:

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

Ich habe dieses Problem behoben, indem ich 0,5px vom Wert der Y-Achse abgezogen habe. Also statt zu tun:

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

Ich tat dies:

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

Dies löste es für mich und ich finde, dass dies eine sauberere Lösung ist, die dann mit dem Prozentsatz herumfummelt oder Javascript verwendet.

25
arjansmeets
19
JSuar

Der einzig richtige Weg, dieses Problem zu lösen:

Dieses Problem ergibt sich aus der Verwendung von% -Werten zum Ausrichten der divs mithilfe von css-Transformationen. Dies führt zu dezimalen Subpixelwerten, die Ihr Bildschirm nicht korrekt darstellen kann. Die Lösung ist, die resultierende Transformationsmatrix zu normalisieren.

Funktioniert möglicherweise besser für feste Divs, die keine Animation transformieren. Wenn Sie jedoch animieren, können Sie einen After-End-Callback für diese Funktion verwenden, um den Endzustand zu korrigieren.

So: Matrix (1,0,0,1, -375, -451.5) würde Matrix (1,0,0,1, -) 375, -451)

Ich rufe diese Methode vor dem .show () von Jquery auf ... Oder vielleicht nur einmal in der Anwendung (abhängig von Ihrem Fall), müssen Sie dies möglicherweise auch beim Größenänderungsereignis usw. aufrufen.

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()+")"});

}

und nenne es 

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

Schön ist es nicht?

Wenn Sie die Größenänderung aktualisieren müssen, können Sie Folgendes tun:

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

Damit dies funktioniert, müssen alle übergeordneten Elemente "ausgerichtet/normalisiert" werden denn wenn Sie durch Beispiel den Körper mit x = 10.1px übrig haben und die Kind ist 10px. Das Problem verschwindet nicht, da das übergeordnete Element Dezimalstellen in der Matrix hat Sie müssen diese Funktion also auf jedes übergeordnete Element und .__ anwenden. verwendet transform.

Sie können dieses Live-Skript hier sehen: https://jsbin.com/fobana/edit?html,css,js,output

7
Miguel

Danke für das CSS-Beispiel. Es scheint, dass translateX(50%) und translateY(50%) einen Pixelwert mit einer Dezimalstelle (z. B. 0,5px) berechnen, der Subpixel-Rendering verursacht.

Es gibt viele Korrekturen, aber wenn Sie die Textqualität beibehalten möchten, ist die beste Lösung jetzt die Verwendung von -webkit-font-smoothing: subpixel-antialiased; für .md-modal, um den Renderstatus für Webkit-Browser wie Chrome und Safari zu erzwingen.

5
BurpmanJunior

Ich habe das Problem behoben, indem ich diese Zeilen entfernt habe:

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

Ich habe eine Weile gebraucht, um eine Lösung zu finden, die ich nicht verwenden würde, also werde ich sie hier posten.

Das Problem für mich war, dass das Kind divwidth und height mit einer Kombination hatte, die das Problem verursacht hat.

Als ich die height für einen anderen Wert änderte, hat es einfach funktioniert! 

Dies hat wahrscheinlich mit den anderen Antworten zu tun, aber ich wollte keine JS verwenden oder die transform -Eigenschaft ändern, um dies zu beheben.

Hier ist ein Live-Beispiel: JSFIDDLE

2
Airton Gessner

Für modale Boxen hilft diese CSS:

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

Anstelle der Y-Achse bei 50% 51%. Dies hilft in meiner cse . Wenn Sie eine andere Position haben, spielen Sie herum, aber normalerweise fixiert 1% Auf/Ab einen verschwommenen Inhalt.

2
Dušan

Eine andere Ursache kann sein, dass Sie nicht die benötigten Schriftstärken bereitstellen, die Sie verwenden.

Wenn Sie z. B. sowohl Lato als auch Roboto verwenden möchten, möchten Sie mehr als nur das Standardgewicht angeben. Dieses Beispiel gilt, wenn Sie die Google Font API verwenden:

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

Hinweis: Lato ist in den Schriftstärken 100, 300, 400, 700 und 900 verfügbar, aber ich musste 900 angeben, damit mein Text 700 scharf erscheint. Ich weiß nicht, warum.

0
kashiraja

Im Moment habe ich nur eine gute Lösung gefunden:

transform: translate(-50%, -50.1%)

0,1% - im Allgemeinen kann der Benutzer dies nicht sehen

Hoffe chrome wird es beheben - der Fehler besteht seit 2014)))

0
egor.xyz

Durch das Hinzufügen eines CSS-Übergangs zum übergeordneten Element des übergeordneten Elements meines verschwommenen Elements (das verwende transformX, das Unschärfe verursachte), wurde die störende Unschärfe tatsächlich aufgehoben.

0
Ol Tron

Das gleiche Problem passierte für mich.

Ich habe mit allen vorgeschlagenen Methoden versucht, keine hat gut funktioniert. Schließlich habe ich es behoben. Da es ein Problem mit Google Chrome gibt, das font-weight:600 oder mehr hat . Ändern Sie die Schriftfamilie in font-family:"Webly Sleek SemiBold","Helvetica";.

Die font-weight-Eigenschaft wird dafür gut funktionieren.

Blur_Font

Without_Blur

0
Knowledge hunt

Wenn Sie keine speziellen js oder benutzerdefinierten Lösungen implementieren möchten und das einzige, was Sie erreichen möchten, ist das zentrieren Ihres div, und die Breite und Höhe haben keine feste Größe, können Sie einfach Folgendes verwenden:

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

Wenn eine der Größen festgelegt ist, können Sie diesen Ansatz ausprobieren:

position: absolute;
left: 50%;
translate: transformX(-50%);
top: 0;
bottom: 0;
margin: auto;

Es behebt das Problem mit unscharfen Schriftarten in Chrom.

0
Kamil Jarząb