iOS 下,iframe 页面中的 position:fixed 定位无效的解决办法

前端 tytrock ⋅ 于 2018-12-06 15:35:44 ⋅ 5760 阅读

bug现象

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

.flo{
    position: fixed;
    top: 40%;
    right: 5px;
    z-index: 99;
    width: 10%;
}

在网页上、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。

本帖已被设为精华帖!
回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter