通过百度和csdn博客发现,造成这个问题的原因是ios对position:fixed;支持度不够。所以,有用到input表单的地方,其parents尽量避免使用position:fixed,要想办法用position:absolute代替。
如果出现:页面内容比较长,input出现在弹出窗内。由于弹出窗需要始终定位在窗口中央,所以不能在弹窗直接使用absolute,所以给出如下解决方案:
将页面文本内容用一个
<div class="content"></div>
包起来,设置高度满屏(height:100vh);然后再放入到
<div class="content_box"></div>
里,和弹窗元素同级,也设置高度满屏,超出部分滚动。。。详细看如下代码实例:
<div class="content_box">
<div class="content">
...
</div>
<div class="alert_wrap">
...
</div>
</div>
<style>
.content_box{
height:100vh;
position: realtive;
}
.content{
height:100vh;
overflow: scroll;
}
.alert_wrap{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
...
}
</style>