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

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

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

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

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

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

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

如果您觉得文章内容对您有用,不妨支持我创作更多有价值的分享:


已发布

分类

来自

评论

《 “解决 iOS webkit 使用CSS动画时闪烁的问题” 》 有 3 条评论

  1. […] 解决 iOS webkit 使用CSS动画时闪烁的问题 […]

  2. soap.yu 的头像
    soap.yu

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据