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); 
} 

这对我的机器性能有很大的影响。