css box-shadow blur 重绘导致动画卡顿

问题

在开发可拖动切换page的面板(类似安卓viewpager、前端swiper.js)时,发现给元素设置了box-shadow后拖动时和释放后的动画都很卡顿。
通过注释代码发现,是box-shadow 的 blur 属性影响了动画。

原因

究其原因,是拖动元素时,位置的改变引发了图形的重绘。
因为浏览器的图形绘制算法是按照像素定位元素,并基于该位置绘制。当元素位置发生改变,也就引发了图形的重绘

解决发方案

  1. 在css禁止该组件下的所有额外的图形选项。比如 .selector * {box-shadow: none;filter: none;}
  2. 在js中通过添加和移选择器,来动态改变其图形选项
    .moving * {box-shadow: none;filter: none;}
    在 ontouchstart 添加选择器,在ontouchend移除选择器
  3. 还有更多图形选项,自行添加
posted @   钰琪  阅读(234)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示