CSS3ボックスシャドーは、Safari 5.0.2でスクロールラグ（パフォーマンス低下）を引き起こしますか？

Question

Hey there、
今回は、Safari 5.0.2でのみ発生する非常にまれな問題があります。 CSS3のボックスシャドウパラメータSafariの性能がそれほど悪い場合は、適切にスクロールダウンしたり、サイトと期待通りにやり取りすることさえできません。

Iは、平均サイズ（960x320ピクセル）を有する <div class="blox"></div>を有し、これらは、その関連する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 */ 

私はjQueryを使ってCSS3ボックスシャドウを設定しようとした

（の.css（））は結果は同じ（遅れ）でした。ああ、ボーダー半径はこれを引き起こしません（私はそれを数回テストして捨てました）。

だからこそ解決策はありますか？正直なところ、SafariなどのWebKitブラウザでもこの種の問題が発生することには驚きました。いくつかのウェブサイトでは、インセット&の影を使い、Safariでうまく動作するので、方法が必要であることはわかっています。私はここでStackOverflowでボックスイメージを解決策として挙げた投稿を見つけました。しかし、その投稿はかなり古いものでした。

私は本当に、あなたの時間と任意のサポートを感謝します。
あらかじめありがとうございます！

クリス

Answer 1

これは既知の問題です。 issue 22102 in the WebKit bug trackerに従ってください（「-webkit-box-shadowはひどいスクロール/サイズ変更/再描画のパフォーマンスを引き起こします」）、修正時に通知を受けます。

例のボックスシャドウは非常に大きな半径を持っているため、悪化します。これは他のサイトで動作するように見える理由を説明しています。

Answer 2

なぜあなたはショックを受けていますか？ Webkitは新しいものを実装するのが速いかもしれませんが、ほとんどの場合、非常にバグの多い方法でそうしています。

とにかく、ボックスシャドウのグラデーションを偽装しようとしているようです。 CSS3のグラデーション（Moz syntax | Webkit syntax | Operaのサポートはまもなく登場し、mozの-o接頭辞付き）や画像の背景の使用を検討することをおすすめします。

また、box-image CSSプロパティもありません。それらはborder-imageを意味するかもしれません。