Lag Scroll con la proprietà CSS3 box-shadow?

Question

Ho aggiunto un box-shadow ad una sezione di una pagina di recente per dare lo stesso effetto frontiera ombra che si vede su applicazioni Mac OS X. Sembrava fantastico, ma ho notato che lo scorrimento su e giù sulla pagina rendeva lag. Io di solito vedo solo questo su pagine che hanno le immagini di sfondo fastidiosi e tonnellate di immagini e video incorporati intonacate tutto ( tosse MySpace tosse ). Originariamente ho deciso di utilizzare box-shadow in quanto ho pensato che sarebbe eliminare la necessità di utilizzare un'immagine, che eliminerebbe ogni possibilità di ritardo di scorrimento.

So che CSS3 è ancora nuovo, ma è questo il motivo per il ritardo? È l'essere software ombra reso o qualcosa del genere? Quando applico l'ombra casella di elementi più piccoli, non lag. Mi chiedo solo se qualcun altro ha sperimentato questo.

Ho appena provato in prima pagina Stack Overflow, sul div #content utilizzando Firebug con un'impostazione di:

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

E ho notato un certo ritardo di scorrimento in seguito. Sto usando Firefox 3.5.

La mia domanda è, quali sono alcune alternative all'utilizzo di questo attributo se voglio aggiungere uno stile di bordo di Mac OS X a una sezione della mia pagina?

Una nota a parte, qualcuno sa se è possibile applicare l'ombra casella solo verso l'alto, a sinistra, ea destra dell'elemento e non il fondo? Ho provato 1px -1px 10px ma mostra ancora l'ombra sul fondo. Se continuo a diminuire compensato la seconda, alla fine rimuove l'ombra dal basso, ma poi l'ombra superiore è ora modo più scuro e più grande.

E sì, ho visto gli articoli sul box-shadow a:

• CSS3 Info
• di fredericiana blog

Answer 1

La cosa migliore sarebbe quella di utilizzare -moz-border-image . Questo dovrebbe risolvere entrambi i problemi.

es. si potrebbe usare un'immagine come questa, , In combinazione con i CSS come questo

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

per creare la tua ombra. E dal momento che si sta utilizzando un'immagine, è possibile lasciare fuori l'ombra di fondo pure, se si vuole.

---

Non sta andando ad essere in grado di rimuovere l'ombra dal fondo utilizzando -moz-box-shadow; non è chiamato "shadow box" per niente. Si applica un'ombra alla intera scatola. Non è possibile specificare l'ombra per ogni lato separatamente come con border, dici. Il meglio che si possa fare è giocherellare con il posizionamento, sfocatura e la diffusione dell'ombra. Ma questo porta inevitabilmente a un'ombra scura sul lato opposto.

Ho l'ombra lag scatola e quando provo su StackOverflow. Colpisce prestazioni su Safari e quando provo -webkit-box-shadow, anche se non è così evidente come in Firefox. La performance si spera di migliorare in futuro, ma presumo l'ombra avrà sempre alcuni impatto dal momento che per quanto ne so, è software reso.

Answer 2

Questo è stato risolto in WebKit come di due giorni fa. :)

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

È possibile prendere un cromo notte di provarlo.

Ho guardato in FF3.6 e FF4 e non vedo le prestazioni di scorrimento terribile lì, quindi potrebbe essere affrontato anche lì.

Answer 3

Il problema persiste ancora in Chrome per Android a partire dalla data corrente. Alcune combo box-shadow si traducono in una scarsa performance di scorrimento. Nel mio caso impilabile due dell'inserzione scatolari ombre (ad esempio superiore / inferiore) portare al problema descritto. L'unica soluzione che posso fornire è quello di rendere i box-ombre meno complessa e riprovare ... che ha lavorato per me. Questo è insoddisfacente ma sì invece u può anche utilizzare la soluzione border-immagine o rimuovere completamente i box-ombra colpite. Spero che questo venga risolto al più presto, finalmente. Btw la versione Android di Firefox non ha i problemi più (per la mia css3). Inoltre le versioni desktop di entrambi i browser non sono interessati nel mio caso.

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#
}

versione del browser Croce per vecchi e nuovi browser. Semplice img: http://i28.tinypic.com/2njzkt1.png

style : fisso per le immagini troppo sovraccarico del browser perfomance