记录：关于苹果端IOS系统webkit-overflow-scrolling-touch不显示元素的兼容性问题

项目中给某个带滚动条的元素添加了 overflow:scroll以及 -webkit-overflow-scrolling: touch;

-webkit-overflow-scrolling: touch;MDN定义

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

此时元素在安卓和PC端正常显示，但在部分机型，小米、苹果端不显示。

这个问题很早就存在，现在也一直存在，而且 Android 之所以不存在这个现象，是因为 Android 压根不支持 -webkit-overflow-scrolling: touch; 这个属性，而 ios 存在问题，恰恰是因为 ios 支持了这个属性，但是它处理的机制是：

如果一个元素同时存在 -webkit-overflow-scrolling: touch; 和 overflow:scroll属性，其元素会在容器发生滚动的时候，跟着一起往上或者线下滚动，从而导致页面缺失。

解决办法：只需要在公共样式加入下面这行代码

*{
-webkit-overflow-scrolling: touch;
}

但是这种方法，如果元素过多过杂的情况下，可能会出现一些其他兼容性问题，目前没有找到更好的解决办法。