CSS3のbox-shadowプロパティでスクロールラグが発生しますか？

Question

を追加しました box-shadow 最近ページのセクションに追加して、Mac OS X アプリで見られるのと同じ影の境界線効果を与えます。見た目は素晴らしかったですが、ページを上下にスクロールすると遅れが生じることに気付きました。通常、これは煩わしい背景画像や大量の画像や埋め込みビデオがあちこちに貼り付けられているページでのみ発生します (咳 MySpace 咳）。私が最初に box-shadow を使用することに決めたのは、画像を使用する必要がなくなり、スクロール ラグの可能性がなくなると考えたからです。

CSS3 がまだ新しいことは知っていますが、これが遅れの原因でしょうか?影はソフトウェアレンダリングか何かでしょうか？小さな要素にボックス シャドウを適用すると、まったく遅れません。他にこれを経験した人がいるかどうかだけが気になります。

Stack Overflow のフロント ページで試してみました。 #content Firebug を次の設定で使用して div します。

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

そして、その後スクロールの遅れに気づきました。Firefox 3.5を使用しています。

私の質問は、ページのセクションに Mac OS X スタイルの境界線を追加したい場合、この属性を使用する代わりにどのような方法があるでしょうか?

余談ですが、ボックスの影を要素の上部、左側、右側にのみ適用し、下部には適用できないかどうかを知っている人はいますか?私は試した 1px -1px 10px しかし、それでも底部に影が表示されます。2 番目のオフセットを減らし続けると、最終的には下から影が削除されますが、上の影はかなり暗く、大きくなります。

そして、はい、次のボックスシャドウに関する記事を見ました。

• CSS3情報
• フレデリシアナのブログ

Answer 1

あなたの最善の策は、代わりに -moz-border-image に使用することです。それはあなたの問題の両方を解決する必要があります。

例えば。あなたはこのようなイメージを使用することができ、 の

このようなCSSと組み合わせ

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

あなたの影を作成します。あなたがイメージを使用しているので、あなたが望むなら、あなたは、同様に下の影を残すことができます。

<時間>

あなたは-moz-box-shadowを使用して、下から影を削除できるようにするつもりはありません。それは何のために、「ボックスシャドウ」と呼ばれていません。これは、ボックス全体に影を適用します。あなたが言う、別途borderと同じように各側に影を指定することはできません。あなたができる最善のは、影の配置、ぼかしや普及に周りのフィドルです。しかし、それは必然的に反対側の暗い影につながるます。

私はStackOverflowの上でそれをしようとしたとき、私は、同様のボックスシャドウ遅れを得ます。それは、Firefoxほど顕著ではないが、私は、-webkit-box-shadowをしようとすると、それだけでなく、Safariでのパフォーマンスに影響を与えます。パフォーマンスがうまくいけば、将来的に改善されますが、私は私の知る限りでは、それはののソフトウェアレンダリングであることから。

影は常にいくつかのの影響をを持つことになります推測します

Answer 2

これは、2日前のようWebKitの中に固定されています。 ：）

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

あなたはそれを試して毎晩クロムを拾うことができます。

私はFF3.6とFF4に見て、そこに恐ろしいスクロールのパフォーマンスを見ていないので、そこにも対処している可能性があります。

Answer 3

問題は、まだ現在の日付のようアンドロイド用Chromeで持続します。いくつかのボックスシャドウコンボが悪いスクロールのパフォーマンスにつながります。私の場合で説明した問題につながる2はめ込みボックスシャドウ（例えば上/下）を積み重ねます。私が提供できる唯一の解決策は、箱影がそれほど複雑にし、もう一度試して...私のために働いたということです。それは不十分なのですが、ええ代わりにUはまた、国境・画像・ソリューションを使用することができ、または完全に影響を受けボックスシャドウを削除します。これは最終的には、すぐに修正されます願っています。ところでFirefoxのAndroidのバージョンはもう（私のCSS3のための）問題はありません。また両方のブラウザのデスクトップバージョンは、私の場合には影響を受けません。

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

古いものと新しいブラウザのためのクロスブラウザのバージョン。 シンプルなIMG： http://i28.tinypic.com/2njzkt1.pngする

スタイル：固定のイメージのためにあまりにも

もパフォーマンスのブラウザをオーバーロード