关于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显示,因为页面可以上下滑动,但是overlaymask却不是固定不动的,而且mask此时也只有一屏的高度,当向上或向下滑动时,也就是说没有mask遮罩层。

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

查询得知,在htmlbody上添加如下代码,即可解决这一问题

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

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

2017.03.15

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

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注