我一直在開發專門用於現代瀏覽器的應用程序，並對box-shadow屬性進行了大量使用。Chrome中極慢的CSS3框陰影
直到最近，這在所有支持的瀏覽器上都一直很好。然而，大約一個月前，在Chrome中進行測試時，我注意到滾動「非常」緩慢，幾乎無法使用。
在過去的一個月中，我嘗試翻譯腳本/搞亂我的html結構，一切你能想到的，直到今天終於找到了原因。
對於我設置的所有元素禁用了box-shadow/webkit-box-shadow，問題就消失了。
讓我感到奇怪的是，它在Chrome中運行良好，直到一個月前。順便說一句，Safari瀏覽器的Windows版本的滾動是好的，儘管比IE/Opera和Firefox慢一點。
這是一個已知的問題？有沒有人有這方面的解決方法？
而最重要的是，還有另一種方法複製相同的效果，而不使用CSS3屬性？
有一個bug報告開業並於去年的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
在此期間，你說得對，黑客邊界圖像是一個選項。看看這裏：
偉大的聯繫，非常感謝馬特......我想它不只是我！我將在接下來的一個小時內與邊界形象物業進行一場比賽，看看我能否拿出可用的東西。謝謝！ – gordyr
原來使用border-image屬性非常簡單，並且已經完美地解決了這個問題。你發佈的最後一個鏈接做了訣竅。顯然，我修改了image/css以匹配我的網站，添加了圓角和漸變，並且能夠用一個相當優雅的解決方案替換CSS漸變。由於我不必在梯度/框陰影/邊框半徑方面支持每個瀏覽器，因此我已經有了大量減少CSS大小的副產品。乾杯! – gordyr
我在我的手機應用程序的按鈕中使用了「box-shadow」，它滯後於'：active'，並且延遲了一段時間，肯定它是一個新的bug。 –
它可能不是箱子陰影，也許在你的應用程序中的其他東西只消耗太多的資源和盒子陰影恰好是頂部的櫻桃。
不過，我可以確認過長或過大的元素會導致性能問題。我爲某個drag'n'drop表單構建器工作，並嘗試在900px x 1000px div上設置box-shadow，並且滾動開始立即滯後。我們是一個非常Ajax重的網絡應用程序，所以其他人可能會得到更好的結果，但我仍然認爲這是一個有效的例子。
因此，我去了老校，並創建了圖像。我認爲在沒有太多圖像負載的情況下獲得圖像框陰影的最合適方法是使用具有固定寬度的元素。
我所做的是三個圖像切片。從頂部到底部角落之間的一個切片，從底部到底部角落之上的一個切片以及從中間開始的一個薄片，我使用div作爲背景圖像，並帶有repeat-y，以便可以動態更改爲div高度適合用戶頁面。
您可以切片更適合任何盒子，但它變得太多（至少有5個額外的圖像和8個額外的div精確）爲盒子陰影IMO。
我不能具體問題發言，但CSS3效果是已知的記錄，以減緩頁面的渲染。 關於複製效果，您能否給我們一個關於如何使用陰影的示例，以便我們可以幫助您找到答案？ –
事實上，直到最近它還沒有任何新的陰影被添加，這似乎很奇怪。而不管。我正在使用它來簡單地在元素周圍添加較小的陰影以提供3D效果。我沒有使用這個效果來模擬它沒有設計的東西。大多數用法是在邊緣周圍的4px-10px半徑之間。唯一的困難是這個'容器元素的大小是動態的，因爲可以添加/刪除內容。奇怪的是，它只是滾動，有問題，所有其他重新刷新/迴流看起來很好 – gordyr
耶，更有趣的是這個線程從一年前RE：safari：http://stackoverflow.com/questions/4789853/css3-box -shadow-causes-scroll-lag-slow-performance-on-safari-5-0-2我記得的一件事是陰影的半徑和陰影的數量都減慢了。對不起，我沒有修復，但。 –