2012-09-09 3 views
5

Ich habe ein Apple wie Coverflow-Element mit CSS3 Übergang und 3D-Transformationen gebaut.CSS3 3D Übergänge flackern in Firefox, wenn auch mit Box-Schatten

http://jsfiddle.net/7eDkb/1/ (Übergang mit box-shadow)

Arbeiten auf Chrom glatt, aber auf firefox, die Abdeckungen flackern zwischen sichtbar und unsichtbar zu sein, wenn sie animiert werden.

Nach einer Beseitigung, habe ich festgestellt, dass das Entfernen der "Box-Schatten" CSS-Eigenschaft aus den Elementen in reibungslosen Übergängen in Firefox führt.

http://jsfiddle.net/7eDkb/2/ (Transition ohne box-shadow)

Ich habe dies in firefox v15 und Chrom v21 getestet.

Gibt es eine Lösung, um sowohl 3D-Übergänge als auch Box-Schatten auf einem Element zu haben, ohne dass es auf Firefox flackert?

EDIT: in den Geigen, graue Bilder klicken, um zu sehen

+2

Sie können den Schatten nur durch ein Bild für Firefox ersetzen. Dies würde etwas Javascript erfordern, also könnte es jetzt die beste Lösung sein. Ich denke, dass die Rendering-Engine von Firefox noch nicht wirklich da ist. Requisiten auf Chrome: D – Kyle

Antwort

3

Es Flimmern ist ein guter Grund, noch niemand diese Frage beantwortet, ist es ein Firefox Bug.

Ich habe dies Bugzilla eingereicht, und es wurde als ein Fehler bestätigt.

https://bugzilla.mozilla.org/show_bug.cgi?id=790239

Wie @ Kyle in seinem Kommentar erwähnt, ist die derzeit beste Lösung, die eine nicht-elegante Alternative zu verwenden, im Falle von Firefox zu Box-Schatten.

Verwandte Themen