Warum sind Chrome-Schriftarten in Modalboxen verschwommen?

Chrome-Schriftart im modalen Feld verschwommen

Dieses Problem tritt auf, wenn Chrome in einem modalen Feld verschwommene Schriftarten anzeigt, obwohl die Schriftart in anderen klar erscheint Browser wie IE und Firefox. Untersuchungen ergaben, dass das Problem in der Transformationseigenschaft im CSS für den Modalcontainer liegt.

Die fehlerhafte CSS-Regel lautet:

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

Diese Regel ist für die horizontale Zentrierung der Modalbox verantwortlich vertikal, indem es um 50 % in beide Richtungen verschoben wird. In Chrome führt diese Übersetzung jedoch zu verschwommenen Schriftarten.

Die Lösung besteht darin, die Werte TranslateX() und TranslateY() zu ändern. Durch Subtrahieren von 0,5 Pixel vom TranslateY()-Wert kann das Rendering-Problem behoben werden. Hier ist der korrigierte Ausschnitt:

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

Diese Änderung stellt sicher, dass das Modal immer noch genau zentriert ist, während die verschwommene Schriftwiedergabe beseitigt wird. Es bietet eine sauberere Lösung im Vergleich zum Anpassen von Prozentsätzen oder der Verwendung von JavaScript-Korrekturen.

Beachten Sie, dass das oben gezeigte CSS für die Klasse „.md-modal“ gilt und das Problem der verschwommenen Schriftart in anderen Kontexten auftreten kann, in denen Es wird eine modale Box verwendet. In solchen Fällen kann die gleiche Lösung angewendet werden, indem die entsprechende CSS-Regel bearbeitet wird, die für die Zentrierung des Modals verantwortlich ist.

Das obige ist der detaillierte Inhalt vonWarum sind Chrome-Schriftarten in Modalboxen verschwommen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!