关于IOS的Safari浏览器fixed定位失效的那些坑

最近在写的一个小项目中遇到一个深坑，就是在ios的Safari浏览器中，使用fixed定位的元素会失效。

比如如下代码

body {
    margin: 0;
}
.container {
    width: 100%;
    height: 1000px;
    background-color: seagreen;
}
.overlay {
    position: fixed;
    width: 500px;
    height: 300px;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -150px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ccc;
    z-index: 99999;
}
.overlay h1 {
    text-align: center;
}
.mask {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.8);
}

<div class="container"></div>
<div class="overlay">
    <h1>overlay</h1>
    <input type="text" >
</div>
<div class="mask"></div>

当input输入框获取焦点后，此时fixed就不起作用，可以近似的把当前的这个bug效果当做absolute显示，因为页面可以上下滑动，但是overlay和mask却不是固定不动的，而且mask此时也只有一屏的高度，当向上或向下滑动时，也就是说没有mask遮罩层。

那么有什么好的解决办法呢？

查询得知，在html和body上添加如下代码，即可解决这一问题

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

在此，感谢一下大师 时鹏亮 给予的帮助！

2017.03.15

经过测试发现，使用了html{height:100%}将会导致在移动端无法获取document.documentElement.scrollTop的值，这是另外一个坑，目前还没有找到好解决办法！我在获取之前是先重置一下html的高度，这样可以获取到，但是这种方法肯定不够好，有可能会带来其它新的问题！