解决CSS transition或transform导致相关元素或容器闪烁抖动的问题

最新推荐文章于 2024-07-19 14:49:39 发布

DR1sxy

最新推荐文章于 2024-07-19 14:49:39 发布

阅读量9.8k

点赞数 5

分类专栏：个人文章标签： html css css3

原文链接：https://10.1pxeye.com/prevent-flickering-of-css-transitions-and-transforms-in-webkit/

版权

个人专栏收录该内容

16 篇文章 0 订阅

订阅专栏

如果发现这些动画导致某些元素或者容器闪烁，抖动时，可以在使用动画属性的元素上（或发生抖动的元素上）添加如下声明：
.listname{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
但是有的时候一些完全不相关的元素也跟着抖动闪烁，可以在body元素上做如下声明：

body {
-webkit-transform: translate3d(0, 0, 0) ;
transform: translate3d(0, 0, 0);
}