甚久不踩移动的坑了,今天我们几个人的小菜群里,娟娟发出了这么个东西,先记下,不然我一定记不住!
说的是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的效果,都失效了。。。