1. 参考

-webkit-overflow-scrolling导致元素消失

CSS

在ios系统的浏览器中, 如果想让可滚动元素(例如有overflow: scroll属性的元素)带有弹性效果, 往往会给可滚动元素添加-webkit-overflow-scrolling: touch属性.
但这个属性有个bug, 可能会导致其内部的某些元素不显示.看起来就好象给元素加上了visibility:hidden一样.

为了修复这个bug, 需要给"某些"后代元素添加transform: translate3d(0,0,0)属性.

1
2
3
4
5
6
7
div {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  div {
    transform: translate3d(0,0,0)
  }
}

这里之所以称"某些",是因为无法确定到底应该加到哪些元素之上.
因为translate3d会产生很多副作用, 例如会改变元素的z-index, 要依具体情况而定.
需注意的是这个方法也不一定总是有效.

另外,有些教程会很极端的给所有元素都加上了translate3d.
这样不仅会改变元素顺序,还会生成大量无法合并的合成层.

1
2
3
4
// 一个糟糕的样式,最好不要这么作
body * {
  transform: translate3d(0, 0, 0);
}

参考

-webkit-overflow-scrolling设置为touch的一个bug
https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
无线性能优化：Composite | Taobao FED | 淘宝前端团队