CSS3 Box-Schatten-Eigenschaft verursacht das Menü Drop-Down-Glätte

Question

Ich verwende jQuery Multi Level CSS Menu #2 für eines meiner Wordpress-Theme.

Aber wenn ich eine CSS3 box-shadow -Eigenschaft zu meinem Hauptdiv hinzufügen, für Hintergrund-Box-Schatten, als der Menü Drop-Down-Effekt wird langsamer und ist nicht so glatt wie es sein soll.

Aber wenn ich die CSS3 box-shadow -Eigenschaft aus dem Haupt-Div entfernen, als der Menü Drop-Down-Effekt wird reibungslos. Das ist mein Haupt div:

#main { background: #fff; margin-top:20px; margin-bottom:0px; -moz-box-shadow: 0 0 10px #000000; 
    -webkit-box-shadow: 0 0 10px #000000; 
    box-shadow: 0 0 10px #000000; 
} 

Mache ich etwas falsch?

Answer 1

Animierte Schatten sind sehr langsam, da sie bei jeder Bewegung neu berechnet werden müssen. Sie erhalten eine Leistungssteigerung sehen, wenn Sie den Radius des Abstandsschatten zu reduzieren, das heißt:

-webkit-box-shadow: 0 0 3px #000000; 

Aber ich würde dropshadows fallen (ha!) Und eine halbdurchlässige Grenze anstatt:

border: solid #ccc 10px; /*for older browsers*/ 
border: solid rgba(255,255,255,0.3) 10px; /*transparent border*/