那些关于苹果的坑
前端开发，最恼火的莫过于各个平台的兼容性，一个好的idea可能因兼容性不得不胎死腹中。下面是我在使用position:fixed时在苹果端遇到的兼容性问题以及解决思路。
问题
position:fixed元素的位置相对于浏览器窗口固定位置。即使窗口滚动它也不会移动。这是我原本寄希望实现的效果。
抱着这样的期望，我完成了代码开发；
perfect；
各种测试都没有问题，信息满满的上线了。
BUT，心态崩了，上线以后苹果手机上面出现了我预料之外的结果。就像这样：
它完全超出了我的预期，打破了一切美好。怎么办，遇到问题解决问题。我各种求索，各种检索。所有的答案都告诉我ios5以上的手机都兼容了position：fixed。
这样的话，似乎也可以接受。毕竟ios5以下的手机用户也不多。可以考虑放弃。事与愿违啊，我拿着一台ios11无语凝噎。说好的兼容性呢？说好的前端福音呢？说好的ios5以上都兼容呢？我这是假的？我天。。。
原因分析
不甘心失败的我，开始了新的一轮测试。我发现没有问题，ios5以上的手机确实兼容了position:fixed。不过它和我们期望的结果不太一样。这个position:fixed并不是相对于浏览器窗口固定位置，它是相对于滚动元素固定位置。什么意思呢？如下代码片段示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position:fixed测试</title>
<style type="text/css">
body{
width: 100%;
height: 100%;
}
.fixed1,.fixed2{
width: 100%;
height: 30vh;
text-align: center;
}
.fixed1{
background: red;
}
.fixed2{
background: blue;
overflow: auto;
}
.fixed{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
display: none;
}
</style>
</head>
<body class="window">
<div class="fixed1">
<div class="fixed" id="fixed1">
示例一
<button onclick="close1('fixed1')">关闭</button>
</div>
<button onclick="show('fixed1')">弹出</button>
</div>
<div class="fixed2">
<div class="fixed" id="fixed2">
示例二
<button onclick="close1('fixed2')">关闭</button>
</div>
<button onclick="show('fixed2')">弹出</button>
</div>
<div>干扰物</div>
<script type="text/javascript">
var show = function(id) {
var elem = document.getElementById(id)
elem.style.display = "block"
}
var close1 = function(id) {
var elem = document.getElementById(id)
console.log(elem)
elem.style.display = "none"
}
</script>
</body>
</html>
由于本人没有苹果的产品，这个示例就不贴图了，亲们可以自己测试查看效果。
解决办法
在使用position:fixed,如果期望实现先对浏览器窗口定位，要确保当前元素的父元素都不能添加滚动样式。即其父元素不能有以下css样式：
overflow:scroll;
<!--或则-->
overfolw:auto;
结论
position:fixed在苹果的产品中并没有实现相对浏览器窗口定位。其实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。
最后抱怨一句：苹果浏览器实现的这一伪功能实在是太坑了。
