Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 10.03.2011, 14:59
shredder01 shredder01 ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 08.01.2008
Beiträge: 143
shredder01 befindet sich auf einem aufstrebenden Ast
Standard Firefox - negativer z-index und generated content?

Hallo,

ich habe gestern mal versucht das hier Advanced (yet awesome) pure CSS3 boxes without using images « Design and Development tuts – TutorialShock soweit wie möglich auch für Firefox und Opera nachzubauen.
Hier liegt die Testseite: Css3 Boxes

Dabei bin ich im Firefox auf zwei merkwürdige Probleme gestoßen:
1. Das Tutorial arbeitet an einigen Stellen mit :before und :after und negativem z-index, um z.B. räumliche Schatteneffekte zu erzeugen. Aus irgendwelchen Gründen scheint aber der Firefox (Chrome, Safari und Opera machen dagegen alles richtig) bei der Stapelung etwas "unstetig" zu sein. Mal erscheinen die Elemente mit negativem z-index im Vordergrund und mal wie gewollt im Hintergrund. Dabei genügt teilweise schon scrollen, um von einem in den anderen Zustand zu wechseln. Einzige Ausnahme ist Box16 (die unterste auf der Seite), da macht es der Firefox immer falsch und holt den Schatten in den Vordergrund.
So soll es sein:
Aber der Firefox macht nach "Lust und Laune" meist folgendes:
Noch merkwürdiger ist, dass das Problem nur bei der auf dem Server liegenden Seite auftritt und sich lokal nicht nachstellen läßt.
Hat jemand 'ne Ahnung was man da machen kann?

2. Das zweite Problem ist ein kleiner Schönheitsfehler, der beim Zusammentreffen von -moz-box-shadow und -moz-transform auftritt: Wenn ich Elemente die einen Schatten haben drehe, verschwindet der Schatten ganz oder teilweise.
So soll es aussehen (und sieht es in Chrome, Safari und Opera auch aus):
Und so sieht es im Firefox aus:
Ich hab schon gegoogelt, aber nichts zu dem Problem finden können. Naja, vielleicht auch noch zu frisch.
Hat jemand dazu vielleicht 'ne Idee?

Geändert von shredder01 (10.03.2011 um 15:02 Uhr)
Mit Zitat antworten
Sponsored Links