最近開發一款產品，要求PC端兩列展示：
移動端展示：
使用display：flex布局，在最外面的wrap上添加overflow-y：auto；手機端使用媒體查詢將兩列寬度設為100%；
出現問題：當表格數據比較大時，PC端與安卓滾動條出現，滾動無問題，但是蘋果IOS在表格里滑動無法觸發滾動；
解決方法：
在滾動容器內加-webkit-overflow-scrolling: touch
添加后偶爾會出現滑動不流暢，仔細查了-webkit-overflow-scrolling該屬性
-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果.
auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。touch: 使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。
網上查了許多資料，具體有下面的幾個坑：
在safari上，使用了-webkit-overflow-scrolling:touch之后，頁面偶爾會卡住不動（本次問題）
通過動態添加內容撐開容器，結果根本不能滑動的bug（本次問題）
在safari上，點擊其他區域，再在滾動區域滑動，滾動條無法滾動的bug（本次問題）
手勢可穿過其他元素觸發元素滾動
Safari對於overflow-scrolling用了原生控件來實現。對於有-webkit-overflow-scrolling的網頁，會創建一個UIScrollView，會對子元素解析生成高度，因為子元素高度為動態加載渲染，不會再對其生成滾動，處理辦法提前設置高度占位，后者動態渲染完成后，再次設置滾動
解決辦法：
子元素設置最小高度：
min-height:101%
或者
子元素設置高度：height:calc(100% - 300px + 1px)