Scroll Lag mit CSS3 Box-Shadow-Eigenschaft?

Question

Ich habe kürzlich einen Abschnitt einer Seite um einen box-shadow ergänzt, um ihm den gleichen Schattenrandeffekt zu geben, der in Mac OS X-Anwendungen zu sehen ist. Es sah gut aus, aber ich bemerkte, dass das Scrollen auf der Seite es verzögerte. Ich sehe das normalerweise nur auf Seiten mit nervigen Hintergrundbildern und Tonnen von Bildern und eingebetteten Videos, die überall verteilt sind (hust MySpace hust). Ich entschied mich ursprünglich dafür, Box-Shadow zu verwenden, da ich dachte, dass es die Notwendigkeit beseitigen würde, ein Bild zu verwenden, das jede Möglichkeit von Scroll-Lag beseitigen würde.

Ich weiß, dass CSS3 noch neu ist, aber ist das der Grund für die Verzögerung? Wird der Schatten als Software gerendert oder so? Wenn ich den Box-Schatten auf kleinere Elemente anwende, kommt es überhaupt nicht zu Verzögerungen. Ich frage mich nur, ob jemand anderes das erlebt hat.

Ich habe gerade versuchte es auf der Stack-Überlauf Titelseite, auf den #content div der Verwendung von Firebug mit einer Einstellung:

-moz-box-shadow: 1px 1px 10px; 

Und ich habe danach eine Scroll-Verzögerung feststellen. Ich benutze Firefox 3.5.

Meine Frage ist, was sind einige Alternativen zur Verwendung dieses Attributs, wenn ich einen Mac OS X-Stil Rahmen zu einem Abschnitt meiner Seite hinzufügen möchte?

Auf einer Seite zur Kenntnis, weiß jemand, ob es möglich ist, die Box Schatten nur nach oben, links, und die rechte Seite des Elements und nicht der Boden anzuwenden? Ich versuchte 1px -1px 10px, aber es zeigt immer noch den Schatten auf der Unterseite. Wenn ich den zweiten Offset weiter verkleinere, entfernt er eventuell den Schatten von der Unterseite, aber dann ist der obere Schatten nun viel dunkler und größer.

Und ja, ich habe die Artikel auf box-shadow gesehen bei:

• CSS3 Info
• fredericiana's blog

Answer 1

Ihre beste Wette wäre -moz-border-image stattdessen zu verwenden. Das sollte beide Probleme lösen.

z. Sie könnten ein Bild wie dieses, http://i28.tinypic.com/2njzkt1.png, kombiniert mit CSS wie diese

-moz-border-image: url(shadow.png) 10/10px; 

erstellen Sie Ihre Schatten verwenden. Und da Sie ein Bild verwenden, können Sie auch den unteren Schatten weglassen, wenn Sie möchten.

---

Sie sind nicht den Schatten von unten -moz-box-shadow mit in der Lage sein zu entfernen; es heißt nicht umsonst "Box Shadow". Es wendet einen Schatten auf die gesamte Box an. Sie können keinen Schatten für jede Seite separat angeben, wie z. B. mit . Das Beste, was Sie tun können, ist mit der Platzierung, Unschärfe und Ausbreitung des Schattens herumzutüfteln. Aber das führt zwangsläufig zu einem dunkleren Schatten auf der gegenüberliegenden Seite.

Ich bekomme die Box Schatten Verzögerung auch, wenn ich es auf Stackoverflow versuche. Es wirkt sich auch auf Safari aus, wenn ich -webkit-box-shadow versuche, obwohl es nicht so auffällt wie in Firefox. Die Leistung wird hoffentlich in Zukunft verbessern, aber ich nehme an, der Schatten wird immer einige Auswirkungen haben, da, soweit ich weiß ist Software gerendert.

Answer 2

Dies wurde in Webkit vor zwei Tagen behoben. :)

https://bugs.webkit.org/show_bug.cgi?id=22102

Sie können jede Nacht eine Chrom abholen, um es auszuprobieren.

Ich sah in FF3.6 und FF4 und sehe keine schrecklichen Scroll-Performance dort, so könnte es auch dort angesprochen werden.

Answer 3

#shadow { 
-moz-border-image: url(img.png) 10/10px; #Firefox under v15.0# 
-webkit-border-image: url(img.png) 10/10px; #Safari, Chrome under v15.0, Android & iOS# 
-o-border-image: url(img.png) 10/10px; #Opera under v15.0# 
border-image: url(img.png) 10/10px; #IE v11+, other new Browser# 
} 

Cross-Browser-Version für alte und neue Browser. Einfacher img: http://i28.tinypic.com/2njzkt1.png

Stil : fixed für Bilder perfomance-Browser zu überlasten

Answer 4

Das Problem weiterhin besteht nach wie vor in Chrome für Android ab dem aktuellen Datum. Einige Box-Schatten-Kombinationen führen zu einer schlechten Scrollleistung. In meinem Fall führt das Stapeln von zwei eingelassenen Box-Schatten (z.B. oben/unten) zu dem beschriebenen Problem. Die einzige Lösung, die ich anbieten kann, ist, die Box-Schatten weniger komplex zu machen und es erneut zu versuchen ... das hat für mich funktioniert. Das ist nicht zufriedenstellend, aber yeah stattdessen können Sie auch die Border-Image-Lösung verwenden oder den betroffenen Box-Shadow vollständig entfernen. Hoffentlich wird das bald behoben. Btw die Android Version von Firefox hat die Probleme nicht mehr (für meine CSS3). Außerdem sind die Desktop-Versionen beider Browser in meinem Fall nicht betroffen.