L'ombreggiatura CSS3 causa lo scroll-lag (prestazioni lente) su Safari 5.0.2?

Question

Ehi lì,
questa volta ho un problema abbastanza raro che si verifica solo in Safari 5.0.2. Quando si utilizza il parametro box-shadow di CSS3, le prestazioni di Safari di non sono corrette, oppure non è possibile scorrere correttamente verso il basso o interagire come previsto con il sito.

Ho un <div class="blox"></div> che ha una dimensione media (960x320 pixel), e queste sono le sue pertinenti impostazioni CSS:

 -moz-border-radius: 4px; /* FF1+ */ 
    -webkit-border-radius: 4px; /* Saf3-4 */ 
    border-radius: 4px; /* Opera 10.5, IE9, Saf5, Chrome */ 
    -moz-box-shadow: inset 0px 0px 140px #dfe1e2; /* FF3.5+ */ 
    -webkit-box-shadow: inset 0px 0px 140px #dfe1e2; /* Saf3.0+, Chrome */ 
    box-shadow: inset 0px 0px 140px #dfe1e2; /* Opera 10.5, IE9 */ 

Ho provato a fissare il CSS3 box-ombra con jQuery (css()), ma il risultato era lo stesso (ritardo). Oh, il raggio di confine non causa questo (l'ho scartato testandolo più volte).

Quindi, c'è qualche soluzione a questo? Onestamente, sono scioccato dal fatto che un browser WebKit come Safari presenti anche questo tipo di problemi. So che ci deve essere un modo, dal momento che diversi siti web utilizzano le ombre iniziali & e funzionano bene in Safari. Ho trovato un post qui in StackOverflow che menzionava l'immagine della scatola come una soluzione .. tuttavia, quel post era piuttosto vecchio.

Apprezzo davvero molto il tuo tempo e qualsiasi supporto dato.
Grazie mille in anticipo!

Chris

Answer 1

Questo è un problema noto. Segui issue 22102 in the WebKit bug tracker ("-webkit-box-shadow causa una visualizzazione/riscrittura/ridisegno delle prestazioni orribile") per ricevere una notifica quando viene corretto.

Si noti che l'ombra della casella nell'esempio ha un raggio molto grande, che lo rende peggiore. Questo spiega perché potrebbe sembrare che funzioni su altri siti - usano solo raggi più piccoli.

Answer 2

Perché sei scioccato? Webkit potrebbe essere veloce nell'implementazione di nuove cose, ma lo fa in modi estremamente buggy per la maggior parte del tempo.

In ogni caso, sembra che tu stia cercando di simulare un gradiente con l'ombra della scatola. Meglio considerare l'utilizzo di un gradiente CSS3 (Moz syntax | Webkit syntax | Supporto Opera in arrivo e seguirà la sintassi moz con un prefisso -o-) o uno sfondo di immagine.

Inoltre, non esiste una proprietà CSS di immagine box. Potrebbero significare border-image.