山维空间

解决 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;
}

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

在 GitHub 上赞助我

已发布

分类

来自

meathill

标签：

, , , , ,

评论

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

  1. Mobile Web开发笔记 | 山维空间

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

    回复
  2. soap.yu 的头像
    soap.yu

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

    回复
    1. meathill 的头像
      meathill

      愿闻其详

      回复

欢迎吐槽，共同进步

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