使用CSS3 box-shadow屬性滾動延遲？

我在最近頁面的某個部分添加了一個box-shadow，使其具有與在Mac OS X應用程序中看到的相同的陰影邊界效果。它看起來不錯，但我注意到，在頁面上滾動和滾動使它滯後。我通常只在看到煩人的背景圖片和大量圖像和嵌入式視頻（咳嗽MySpace咳嗽）的頁面上看到這一點。我原本決定使用box-shadow，因爲我認爲它會刪除使用圖像的需要，這將消除任何滾動滯後的可能性。使用CSS3 box-shadow屬性滾動延遲？

我知道CSS3還是新的，但這是滯後的原因嗎？影子是軟件渲染什麼的？當我將盒子陰影應用於較小的元素時，它根本不會滯後。我只是想知道是否有其他人經歷過這個。

我只是想它的堆棧溢出頭版上使用Firebug用的設定#content格：

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

而我做到後來發現一些滾動滯後。我正在使用Firefox 3.5。

我的問題是，如果我想將Mac OS X樣式邊框添加到頁面的某個部分，有什麼替代方法可以使用此屬性？

在附註中，是否有人知道是否可以將盒子陰影應用於元素的頂部，左側和右側，而不是底部？我試過1px -1px 10px，但它仍然顯示底部的陰影。如果我繼續減小第二個偏移量，它最終會從底部消除陰影，但是現在頂部陰影會變得越來越暗。

是的，我在看到的box-shadow的文章：

來源

2009-08-08 Jorge Israel Peña

你最好的選擇是使用-moz-border-image代替。這應該可以解決你的問題。

E.g.你可以使用這樣的，http://i28.tinypic.com/2njzkt1.png的圖像，用CSS結合這樣

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

創建你的影子。而且，由於您使用的是圖像，所以如果您願意，也可以省略底部陰影。

您無法使用-moz-box-shadow從底部刪除陰影;它沒有被稱爲「盒子陰影」。它對整個盒子施加一個陰影。例如，您不能像border那樣單獨指定陰影。你可以做的最好的事情是擺弄陰影的位置，模糊和擴散。但這不可避免地會導致對面的陰影。

我得到了箱子陰影滯後以及當我在Stackoverflow上嘗試它。它會影響Safari上的性能，當我嘗試-webkit-box-shadow時，雖然它不如Firefox中那麼明顯。未來的表現將有望改善，但我認爲影子總會有影響一些因爲據我所知是軟件呈現。

來源

2009-08-08 20:04:05 mercator

非常感謝我的詳細回覆，我確信其他人會覺得這很有用。不幸的是，我的網站的部分（我的網站的#page屬性，在我的個人資料中可用）有2em的圓角，所以我想這將是非常困難的。我想我需要製作一張像你提供的圖像，但是也有透明背景和圓角。雖然謝謝！很高興知道。 – 2009-08-08 22:48:52

截至兩天前，這已在webkit中修復。 :)

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

您可以夜間拿起鉻嘗試一下。

我看着FF3.6和FF4，並沒有看到那裏可怕的滾動性能，所以它也可以在那裏解決。

來源

2011-02-01 20:07:04

真棒，感謝讓我知道 – 2011-02-02 11:12:28

在這裏仍然很慢，在Chrome 10上 – reelfernandes 2011-03-20 08:57:38

它可能與您的圖形驅動程序有關。在我的測試機器上（雙屏幕，垂直，水平），Safari和Firefox4.0b7的性能在屏幕2上很糟糕，但在屏幕1上很好。儘管如此，使用Firefox 4.0RC1仍然沒有問題。 – user123444555621 2011-03-20 09:52:08

#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

風格：固定的圖像太超載性能比較瀏覽器

來源

2013-11-13 03:10:23 slva2000

問題仍然存在在Android版Chrome瀏覽當前日期的。一些盒子陰影組合導致較差的滾動性能。在我的情況下，堆疊兩個插入框陰影（例如頂部/底部）導致所描述的問題。我可以提供的唯一解決方案是讓箱陰影變得更加複雜，然後再試一次......這對我有用。這是不令人滿意的，但是，你也可以使用邊框圖像解決方案或完全刪除受影響的盒子陰影。希望這個問題得到解決，最後。順便說一句，Android的Firefox版本不再有問題了（對於我的css3）。而且這兩種瀏覽器的桌面版本在我的情況下都不受影響。

來源

2017-09-19 10:20:27 thex

使用CSS3 box-shadow屬性滾動延遲？

回答

相關問題