Probleme mit CSS3 transition & transform
#Code

Probleme mit CSS3 transition & transform

In einem aktuellen Projekt existierte ein Element, das via transform: translate() dynamisch verschoben wird. Diese Bewegung wird mittels einer Verzögerung smooth gemacht. Diese neuen CSS3 Eigenschaften sind größtenteils hardwarebeschleunigt, damit sie schön flüssig dargestellt werden können.

Das jedoch kann teilweise einige Probleme nach sich ziehen:

Der Text erscheint während der Transition dünner, als wäre es für diese Zeit eine dünne Schrift. Manche Textelemente (meistens <p> Tags, jedoch ohne erkennbares Muster) verschieben sich für die Dauer der Transition um ca. 2-3px nach unten. Die Probleme traten auf einem Mac mit der aktuellen Version des Chrome Canary auf.

Nach einiger Recherche musste ich feststellen, dass die Lösung zwar einfach und auch logisch ist, es jedoch nur sehr wenige Quellen dazu gibt.

Dünner Text

Dieses Phänomen hat mit der Textglättung zu tun: Scheinbar verwendet Chrome für die hardwarebeschleunigte Dauer einer Transition eine andere Glättungsmethode.

Diese Glättungsmethode kann mit dem folgenden Code als Standard genutzt werden:

 

body {
 -webkit-font-smoothing: antialiased !important;
}

 

Wichtig: Alle Fonts werden dünner wirken als zuvor. Das aber auch nur unter Webkit basierten Browsern (Der von etwa 59% der Nutzer genutzt wird). Die rund 28% der Nutzer, die den Firefox nutzen sehen eine minimal dickere Font.

-webkit-transform: translateZ(0px);

Auf den ersten Blick macht dieser Style gar nichts. Er wendet eine Transformation um 0px auf das Element an.

Dadurch wird jedoch das Hardwarerendering auf dieses Element erzwungen und löst somit das Problem des sich, während einer hardwarebeschleunigten Aktion, bewegenden Elementes.

Letzterer Style lässt sich einfach als LESS-mixin umsetzten:

 

.forceHardwareAcc() {
  -webkit-transform: translateZ(0px);
  transform: translateZ(0px);
}

 

Danke für diesen Hinweis an Armel Larcier.