will-change的闪屏问题

甚久不踩移动的坑了,今天我们几个人的小菜群里,娟娟发出了这么个东西,先记下,不然我一定记不住!

说的是Safari当中,加了给transform加了will-change,就会一闪一闪亮晶晶。

加will-change类似的问题我也遇到过,当时情况是酱紫的:
有一个fixed的bottom,划动页面的list死活都划不动,于是我加了will-change。然后好嘛,划起来贼爽,但是bottom却跟着动,而且页面闪来闪去的!后来发现问题不在于加不加will-change,而是我不知道啥时候手残了,给body和html加了height:100%... 扎心不。

但图片里讲的不是这件事,这里面说,解决一闪一闪的问题需要按照下面的方法去做:

  • 给动画元素去掉will-change: transform
  • 给父元素加上overflow: hidden

但是!这里面有坑哦~ 这样做的后果是,所有带有transform: translateZ()的元素,它上面translateZ的效果,都失效了。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容