will-change的闪屏问题

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

will-change的闪屏问题_第1张图片

说的是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的效果,都失效了。。。

你可能感兴趣的:(will-change的闪屏问题)