iOS overflow: scroll 不能滚动

问题：web页面在Android和PC浏览器可以滚动，在iOS端不能滚动。这里的iOS不是iphone的safari浏览器，而是iOS端打包的APP内不能滚动。

网上的一些解决方法：

为overflow: scroll元素增加属性 -webkit-overflow-scrolling: touch

给子元素设置最小高度： min-height:101% 或者设置子元素高度 height:calc(100% + 1px)

在webkit-overflow-scrolling:touch属性的下一层子元素上，将height加1%或1px。从而主动触发scrollbar。

main-inner {
	min-height: calc(100% + 1px)
}

你也可以直接加伪元素上：

main:after {
	min-height: calc(100% + 1px)
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
        }

        .div-outer {
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>

<body>
    <div class="div-outer">
        <!---code...-->
    </div>
</body>

</html>

解决方法：设置网页高度100%，然后使用flex布局。子元素的voerflow:scroll属性增加 -webkit-overflow-scrolling: touch

end.

其中原理这篇讲的通透：https://segmentfault.com/a/1190000012761272

描述

此bug出现需要条件：父元素需使用绝对定位absolute或固定定位fixed，使用overflow: scroll / auto（或overflow-y: scroll / auto)，内部子元素是动态大小（例如较大的svg document，近似为内嵌iframe，等等）。

bug出现原因：没有相关官方文档描述该bug。在查阅文档及自己测试的时候总结：iOS safari 会将overflow：scroll的元素识别为一个单独的 ScrollView，并予以一个 -webkit-overflow-scrolling 属性为auto。而safari中的网页本身就是一个大的ScrollView，在脱离文档流的定位时，子元素的高度如果没有在ScrollView建立之前确定，就不会触发内部滑动，而会触发外部滑动。

关于 -webkit-overflow-scrolling：Safari CSS Reference官方是这样描述的：

Specifies whether to use native-style scrolling in an overflow:scroll element.

即该属性会让overflow：scroll的元素拥有像iOS原生一样顺滑的滑动效果。为了实现此目标，safari将所有overflow：scroll的元素用原生创建一个ScrollView，当-webkit-overflow-scrolling属性为touch时，启用硬件加速，出现顺滑效果。

分析

父元素不脱离文档流时，无此bug。
父元素在不指定 -webkit-overflow-scrolling：touch时必定出现无法滑动的问题。
当内部元素为正常的html元素时，无此bug。
当为父元素重新设置overflow属性时，可能会导致safari重建ScrollView而bug消失。（之前版本的实验室用这种方法解决的，但新海外版不能用这种方法fix，所以是可能）

解决方法：

据以上分析以及大量测试得出完美解决方法为：

必须为所有在移动端的overflow: scroll元素增加属性 -webkit-overflow-scrolling: touch。
当父元素可不脱离文档流时不要脱离文档流。
在子元素iframe加载完成后可异步将父元素的overflow: scroll属性重写（此方法可能不成功）。
如以上没有解决，则给予子元素一个min-height，大小不限（略大于效果最好），帮助safari建立ScrollView（亲测最有效）。