解决 iOS webkit 使用CSS动画时闪烁的问题

解决webkit下的闪烁问题

这个,咱们必须承认版本管理不是万能的,尤其对于像我这样习惯不好的人来说,更是如此。比如,上次不知道改了什么东西,导致肉大师制作的杂志在 iOS 里突然就变卡了,而且不仅卡,还伴随黑块、切换图片的最后会闪一下。

开始我一直以为是性能问题,调啊调啊调啊,就是不见好。于是 Google “ios phonegap 闪烁”,然后发现一篇文章,内容是解决 iOS 下 Safari 渲染 Transition 时页面闪动的问题。说只要加一句 -webkit-backface-visibility: hidden; 就行,这样可以避免元素转换时显示元素背面。虽然听起来莫名其妙,不过我觉得有戏,但是文章里没有提应该加在哪儿,所以我想了想,在样式表里加了一句:

#container {
  -webkit-backface-visibility: hidden;
}

因为我用到 iScroll,而负责动画的CSS是加在 #container 上,所以我就理所当然的把这段代码加在这里。测试,没有效果。

于是我一发狠,把这段样式加在所有元素上,居然问题就解决了。

#viewport * {
  -webkit-backface-visibility: hidden;
}

作者: meathill

爱编程,爱旅游,爱吐槽。
今年的第一目标是成为一名优秀的讲师,做够 25 场直播,收集 1000 位听众! (12/25)
《Electron + Vue 实战开发》创作中……

《解决 iOS webkit 使用CSS动画时闪烁的问题》有3个想法

  1. 遇到同样的问题。。。纠结。。非要搞一个范围很大的选择器才能起效。。。但是 又容易造成iscroll性能差一点。。。而且还引发了布局上的BUG。。

欢迎吐槽,请勿装死