3D-CSS-Transformation: Umgang mit gezackten Kanten in Firefox

Parallel zum Problem der gezackten Kanten bei Chrome-CSS-Transformationen tritt ein ähnliches Problem auf mit Firefox bei 3D-Transformationen. Eine Illustration finden Sie in diesem JSFiddle (Firefox-spezifisch): http://jsfiddle.net/78dK/5/.

Anders als in Chrome bietet die Sichtbarkeit der Rückseite in Firefox keine Lösung.

Problemumgehungen:

Problemumgehung 1 (Umrissattribut):

Für eine universellere Lösung sollten Sie das Hinzufügen eines transparenten Umrissattributs in Betracht ziehen:

outline: 1px solid transparent;

Dieser Ansatz wurde auf Firefox 10.0.2 Windows 7 verifiziert: http://jsfiddle.net/nKhr8/.

Problemumgehung 2 (Rahmenattribut):

Alternativ können Sie ein Rahmenattribut mit einer zum Hintergrund passenden Farbe hinzufügen:

border: 1px solid white;

Diese Option ist wirksam, wenn die Hintergrundfarbe bekannt ist (z. B. in diesem Fall Weiß): http://jsfiddle.net/LPEfC/.