最近开发一款产品，要求PC端两列展现：web
移动端展现：布局
使用display：flex布局，在最外面的wrap上添加overflow-y：auto；手机端使用媒体查询将两列宽度设为100%；flex
出现问题：当表格数据比较大时，PC端与安卓滚动条出现，滚动无问题，可是苹果IOS在表格里滑动没法触发滚动；spa
解决方法：code
在滚动容器内加-webkit-overflow-scrolling: touchxml
添加后偶尔会出现滑动不流畅，仔细查了-webkit-overflow-scrolling该属性blog
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.开发
auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会当即中止。touch: 使用具备回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会建立一个新的堆栈上下文。产品
网上查了许多资料，具体有下面的几个坑：it
在safari上，使用了-webkit-overflow-scrolling:touch以后，页面偶尔会卡住不动（本次问题）
经过动态添加内容撑开容器，结果根本不能滑动的bug（本次问题）
在safari上，点击其余区域，再在滚动区域滑动，滚动条没法滚动的bug（本次问题）
手势可穿过其余元素触发元素滚动
Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会建立一个UIScrollView，会对子元素解析生成高度，由于子元素高度为动态加载渲染，不会再对其生成滚动，处理办法提早设置高度占位，后者动态渲染完成后，再次设置滚动
解决办法：
子元素设置最小高度：
或者
子元素设置高度：min-height:101%
height:calc(100% - 300px + 1px)