私は最新のブラウザ用に特別にアプリケーションを開発しており、ボックスシャドウプロパティを非常に重視しています。ChromeのCSS3ボックスシェードが極端に遅い
最近まで、これはサポートされているすべてのブラウザで絶対に問題ありませんでした。しかし、Chromeでテストした約1ヶ月前に、私はスクロールが「極端に遅い」ことに気付き、ほとんど使えなくなってしまいました。
私は過去1ヶ月間、スクリプトをリッピングしたり、HTML構造を使いこなしたりしました。
設定したすべての要素でbox-shadow/webkit-box-shadowを無効にすると、問題は消えます。
奇妙なことは、1ヵ月ほど前まではChromeでうまくいきました。ちなみに、SafariのWindows版のスクロールは、IE/OperaやFirefoxより少し遅いですが、うまくいきます。
これは既知の問題ですか？誰にもこれに対する回避策がありますか？
さらに重要なのは、CSS3プロパティを使用せずに同じエフェクトを複製する別の方法がありますか？
は昨年のWebkitで開閉：
CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?
Chromeは古いバージョンで開いバグがありそうです：
http://code.google.com/p/chromium/issues/detail?id=95164
Airbnbが議論しました最近の問題で、実際には最終的なデザインが変更されています：
http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
最近、プログラムでCSSのパフォーマンスをテストすることに興味を持っているグループがあります。ここでは、あなた自身のテストを開始するために使用できるブックマークレットだ：一方
http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling
、あなたはボーダー-画像をハッキングすることはオプションであることですね。ここでそれをチェックアウト：
大きなリンク、巨大な感謝マット...私はそれだけではないと私は推測する！私は、次の1時間にボーダー画像のプロパティで遊びに行って、何か使えるものがあるかどうかを見極めるつもりです。ありがとう！ – gordyr
border-imageプロパティを使うとかなり簡単になり、問題は完全に解決されました。あなたが投稿した最後のリンクがそのトリックでした。明らかに私は自分のサイトに合わせるためにimage/cssを修正し、丸みを帯びたコーナーとグラデーションを追加し、CSSのグラデーションを置き換えることもできました。これは、グラデーション/ボックスシャドウ/ボーダー半径の観点から各ブラウザをサポートする必要がないので、CSSサイズを大幅に減らすという副産物がありました。乾杯！ – gordyr
私は私の電話アプリのボタンに 'box-shadow'を使っていましたが、'：active'より遅れて遅れていました。確かにそれは新しいバグです。 –
これはボックスシャドーではないかもしれません。アプリ内の他のものがあまりにも多くのリソースを消費するだけで、ボックスシャドウがちょうどその上のチェリーになります。
しかし、長すぎる要素や大きい要素のボックスシャドウがパフォーマンスの問題を引き起こすことが確認できます。私は特定のdrag'n'dropフォームビルダのために働いて、900px x 1000px divにボックスシャドーを設定しようとしました。スクロールがすぐに遅れて開始しました。私たちは非常にajax重いweb-appなので、他の人はよりよい結果を得る余裕があるかもしれませんが、これは正しい例だと思います。
私は古い学校に行って代わりに画像を作成しました。あまりにも多くの画像負荷をかけずに画像ボックスの影を処理する最も適切な方法は、固定幅の要素を持つことです。
私がしたことは、3つの画像スライスでした。 1つのスライスを頂点から頂点の直下まで、下から1つ下のコーナーの上に、スライダを1つの薄いスライスにしてdivで使用し、repeat-yを使ってバックグラウンドイメージとしてdivsの高さに動的に変更できますユーザーのページに合わせてください。
ボックスのサイズに合わせてさらにスライスすることはできますが、ボックスシャドウの場合、大きすぎる（余分な画像が5つ、余分なdivが8つあります）。バグ報告がありました
私は特定の問題に話すことはできませんが、CSS3の効果が知られており、ページのレンダリングを遅くするために文書化されています。 エフェクトを複製することについては、影をどのように使用しているかのサンプルを提供して、回答を見つけるのを手伝ってもらえますか？ –
確かに、ちょうど奇妙に思えます。最近まで、新しいボックスシャドウは追加されていませんでした。それにかかわらず。 3D効果を与えるために要素の周りにマイナーシャドウを追加するために使用しています。私はそれが設計されていないものをシミュレートする効果を使用していません。ほとんどの使用方法は、エッジの周りの4ピクセル〜10ピクセルの半径です。唯一の難点は、コンテンツが追加/削除されると、このコンテナ要素のサイズが動的であることです。奇妙なことに、それだけで問題を抱えているだけのスクロールです。他のすべての再ペイント/リフローはきれいに表示されます。 – gordyr
YAH、さらに興味深いのは、このスレッドが1年前ですRE：safari：http://stackoverflow.com/questions/4789853/css3-box -shadow-causes-scroll-lag-slow-performance-on-safari-5-0-2私が覚えている事は、シャドウの半径とシャドウの数の両方がそれを減速させることです。申し訳ありませんが、修正はありません。 –