移动端 H5 尽量不要使用 position: fixed

苹果会对position: fixed的元素位置做调整，这件事情已经遇到两次了。

问题

移动端开发中为了实现一个居中的弹窗，我们经常会做一个{position: fixed; height: 100%}的半透明蒙层，然后相对这个蒙层增加一个子节点，实现弹窗。弹窗里可能是一句简单提示加一个确定按钮；或者有一些相对复杂的交互，比如 modal 框里要用户填写一些信息。

2017年3月份遇到的一个问题是，在 Safari 里，点击到 modal 框里 时，modal 框会如下图所示“闪烁”，这个问题后来在 iOS 11 发布后，在 iOS 微信里也出现了，应该是 WKWebview 做的“优化”。

image

我最近在 iPhone X 上遇到的问题时，当页面滚动到底部时，position: fixed的元素会被顶上去。这里和一些 iPhone X 适配文章上说的bottom: 0仍距离底部有 34px 的空白、要设置viewport-fit=cover不一样，在我看来这里更像是 iOS 处理 fixed 元素的 bug.

image

(正常的.login)

image

(滚动到页面底部时，.login显示仍然靠在底部，但是实际元素被顶了上去。用户点击事件也是选中的区域在响应，这是不可接受的)

我的页面会遇到这个问题是因为通过指定 viewport 宽度来实现页面的响应式适配，如下。

这里应该是 iOS 在处理 viewport 缩放和避让 iPhone X 底部功能区域时，出现了 bug.

这里有一个 demo，可以使用 iPhone X 或 XCode 模拟器的 Safari 查看：

iPhone X reach bottom bug with viewport width​codepen.io

图标

解决方案

解决方案不是很优雅，因为项目本身已经比较稳定，影响页面众多，只能暂时针对 iPhone X 进行修复。

当动态向页面增加 fixed 蒙层时，将主要内容节点（一个很长的容器）改成position: absolute，计算内容的scrollTop，作为marginTop赋值给它，以此实现用户基本无感知后面的内容页面被改动了（实际上在不同 webview 内会有不同程度的一个闪烁）。

关闭蒙层的时候，再逆操作刚刚的步骤，将“被截断”的内容节点再还原。

更好的解决方案

更好的解决方案，即是如标题所述，尽量避免在移动端开发中使用position: fixed，而是更多使用更现代的布局方式和position: absolute来实现类似需求。

原文来自知乎https://zhuanlan.zhihu.com/p/33479001