ios下,iframe页面中的position:fixed定位布局错误

bug现象

开发微信公众账号,需要使用iframe展示一个页面,点击这个页面中的按钮时,会弹出一个对话框,对话框使用fixed定位,关键布局信息如下所示:

div.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100;
z-index: 100;
}

在网页上、Android版微信中都没问题,但是iOS中,该fixed页面显示不正常。在iOS中,该弹出页面高度达到了4600px,而正常情况下应该为1000px左右,也就是说iOS在这个布局中,将整个页面包括滚动的高度都计算在内,而不是仅计算屏幕显示的高度。
而fixed定位最重要的应用就是当页面滑动,使用该定位的元素也不会动,而是固定在屏幕的某个位置。
修改height的值,将height变为固定值,发现该对话框固定在了页面的某个位置,而不是浏览器窗口的某个位置。

bug原因

查阅了部分资料,发现iOS系统,iframe下的fixed定位有问题。

bug解决

参考了网上的建议,对滚动部分设置高度:

var parentHeight = window.parent.innerHeight;
$('.contents').css({
  height: parentHeight + 'px',
  overflow: 'auto',
  '-webkit-overflow-scrolling': 'touch',
});

iOS设置高度后,页面滚动不流畅,所有设置了-webkit-overflow-scrolling样式,使其滚动流畅一些。
而之所以使用父页面的innerHeight是因为iframe中获取innerHeight的值是错误的。
window.parent.innerHeight也可以写为top.innerHeight。

致谢

感谢提供解决方案的开发者,在这里附上网址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值