CSS轉換滯後

Question

這個HTML5/CSS主題完美地適用於臺式機，也適用於移動版本，總是來自桌面瀏覽器，但在移動瀏覽器轉換過程中存在延遲（使用Chrome和Firefox進行測試）。

有人可以幫助我改進CSS？我已經測試了許多解決方案，例如使用transform css propriety啓用硬件加速，但似乎沒有任何工作。

這是主題：https://html5up.net/uploads/demos/dimension/

Answer 1

沒有挖得太深了進去，點擊菜單項時的滯後是由大的背景圖像上的轉變過濾blur造成的。這只是一項固有的昂貴操作，並且與轉換scale轉換相結合。

在這方面有一些技巧，例如爲模糊切換低分辨率，放大圖像，但它們確實是黑客 - 簡短的回答是，如果您需要平滑的過渡性能，請不要在複雜元素上設置動畫過濾器，並且絕對不會同時動畫組合過濾器和其他操作。

作爲快速修復，請在樣式表中找到body.is-article-visible #bg:after部分，然後除去變換：scale（）;使背景只是模糊，不模糊和縮放：

body.is-article-visible #bg:after { 
    -moz-filter: blur(0.2rem); 
    -webkit-filter: blur(0.2rem); 
    -ms-filter: blur(0.2rem); 
    filter: blur(0.2rem); 
} 

這對我的機器性能有很大的影響。