Chrome Text unscharf bei translate3d -50%

[mixmastertobsi]

Hallo,

ich habe folgendes Problem - und zwar erscheint mein Text unscharf, wenn ich in Chrome translate3d(0,-50%,0) verwende.

Ich habe schon verschiedene Word-Arounds proviert, aber leider hatte keines geholfen.

Jemand eine Idee, wie ich es am besten lösen kann?

position: absolute;
left:0
top: 50%;
transform: translate3d(0,-50%,0)

[Gunnar Bittersmann]

@@mixmastertobsi

ich habe folgendes Problem - und zwar erscheint mein Text unscharf, wenn ich in Chrome translate3d(0,-50%,0) verwende.

Kann ich nicht nachvollziehen (Chrome unter macOS). Test

Warum verwendest du translate3d, wenn du gar nicht in z-Richtung verschieden willst?

Warum verwendest du überhaupt eine Verschiebung um −50%?

Ah, vertikale Positionierung:

position: absolute;
left:0
top: 50%;
transform: translate3d(0,-50%,0)

Dafür absolute Positionierung zu verwenden ist von vorgestern. Das geht heute mit Flexbox oder Grid.

LLAP 🖖

[mixmastertobsi]

Schaue Dir das mal mit Font-Size 1em an. Dann müsstest Du es sehen

[Gunnar Bittersmann]

@@mixmastertobsi

Schaue Dir das mal mit Font-Size 1em an. Dann müsstest Du es sehen

Nö. Hab die Schriftgröße in meinem Test auf 1em reduziert. Ich sehe keinen Unterschied. Gibt es denn einen?

Aber wie gesagt, du brauchst das nicht.

LLAP 🖖

[mixmastertobsi]

Schaue Dir das mal im FF an - da ist die Schrift richtig schön scharf. Im Chrome nicht.

[Matthias Apsel]

Hallo mixmastertobsi,

Schaue Dir das mal im FF an - da ist die Schrift richtig schön scharf. Im Chrome nicht.

Möglicherweise ist das auch vom Betriebssystem abhängig.

Bis demnächst
Matthias