Scroll Lag mit CSS3 box-shadow Eigenschaft?

Question

Ich habe eine box-shadow auf einen Abschnitt einer Seite vor kurzem den gleichen Schatten Grenzeffekt zu geben, die auf Mac OS X-Anwendungen zu sehen ist. Es sah toll aus, aber ich merkte, dass Scrollen nach oben und unten auf der Seite machte es hinken. Ich sehe in der Regel nur dazu auf den Seiten, die störende Hintergrundbilder und Tonnen von Bildern und eingebetteten Videos überall verputzt haben ( Husten MySpace Husten ). Ich beschloss, die ursprünglich box-shadow zu verwenden, da ich dachte, dass es die Notwendigkeit beseitigen würde ein Bild zu verwenden, die jede Möglichkeit der Scroll-Verzögerung entfernen würden.

Ich weiß, dass CSS3 noch neu ist, aber das ist der Grund für die Verzögerung? Ist der Schatten seiner Software gemacht, oder was? Wenn ich die Box Schatten auf kleinere Elemente anwenden, ist es überhaupt nicht liegt. Ich frage mich nur, ob jemand diese Erfahrung gemacht hat.

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

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

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

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

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 habe versucht, 1px -1px 10px aber es zeigt immer noch den Schatten auf dem Boden. Wenn ich die zweite Offset halten abnehmen, entfernt ich schließlich den Schatten von unten, aber dann den oberen Schatten sind jetzt Art und Weise dunkler und größer.

Und ja, ich habe die Artikel auf box-shadow zu sehen:

• CSS3 Info
• Fredericiana Blog

Answer 1

Ihre beste Wette wäre, verwenden -moz-border-image statt. Das sollte sowohl Ihre Probleme lösen.

z. Sie könnten ein Bild wie folgt verwenden, Mit CSS wie folgt kombiniert

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

Ihre Schatten zu erstellen. Und da Sie ein Bild verwenden, können Sie auch die unteren Schatten auslassen, wenn Sie möchten.

---

Sie werden in der Lage sein nicht den Schatten vom Boden zu entfernen, mit -moz-box-shadow; es ist nicht „-Box Schatten“ für nichts. Es gilt einen Schatten auf das gesamte Feld. Sie können keinen Schatten für jede Seite separat wie mit border angeben, sagen. Das Beste, was Sie tun können, ist Tüfteln mit der Platzierung, Unschärfe und Ausbreitung des Schattens. Aber das führt zwangsläufig zu einem dunkleren Schatten auf der gegenüberliegenden Seite.

I als auch die Box Schatten liegen, wenn ich es auf Stackoverflow versuchen. Es wirkt sich auf die Leistung Safari auch wenn ich -webkit-box-shadow versuchen, obwohl es nicht so auffällig wie in Firefox ist. Die Leistung wird hoffentlich in der Zukunft zu verbessern, aber ich nehme an dem Schatten wird immer einig Auswirkungen, da soweit ich es weiß, ist Software gemacht werden.

Answer 2

Dies wurde vor als von zwei Tagen in webkit fixiert. :)

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 nicht schrecklich Scroll-Leistung dort, so dass es auch dort angegangen werden könnte.

Answer 3

Das Problem weiterhin besteht nach wie vor in Chrome für Android ab dem aktuellen Datum. Einige box-shadow Combos führen zu einer schlechten Scrollen Leistung. In meinem Fall Stapel von zwei Insetbox Schatten (beispiel oben / unten) zu dem beschriebenen Problem führen. Die einzige Lösung, die ich bieten kann, ist die Box-Schatten weniger komplex und versuchen Sie es erneut zu machen ... die für mich gearbeitet. Das ist unbefriedigend, aber ja stattdessen u kann auch die Grenzbild Lösung verwenden oder den betroffenen box-shadow vollständig entfernen. Hoffe, dass dies bald behoben wird, endlich. Btw die Android-Version von Firefox haben die Probleme nicht mehr (für meine css3). Darüber hinaus ist die Desktop-Versionen der beiden Browser sind nicht in meinem Fall betroffen.

Answer 4

#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 alten und neuen Browser. Einfache img: http://i28.tinypic.com/2njzkt1.png

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