谈一谈苹果手机关于position:fixed的兼容性

时间 2019-11-05

标签苹果手机关于 position fixed 兼容性栏目 CSS 繁體版

原文原文链接

那些关于苹果的坑

前端开发，最恼火的莫过于各个平台的兼容性，一个好的idea可能就是由于解决不了兼容性不得不胎死腹中。下面是我在使用position:fixed方法时在苹果端遇到的兼容性问题以及解决思路。javascript

问题

position:fixed元素的位置相对于浏览器窗口固定位置。即便窗口滚动它也不会移动。这是我本来寄但愿实现的效果。css

抱着这样的指望，我完成了代码开发；html

perfect；前端

各类测试都没有问题，信息满满的上线了。java

BUT，心态崩了，上线之后苹果手机上面出现了我预料以外的结果。就像这样：ios

它彻底超出了个人预期，打破了一切美好。怎么办，遇到问题解决问题。我各类求索，各类检索。全部的答案都告诉我ios5以上的手机都兼容了position：fixed。浏览器

这样的话，彷佛也能够接受。毕竟ios5如下的手机用户也很少。能够考虑放弃。事与愿违啊，我拿着一台ios11无语凝噎。说好的兼容性呢？说好的前端福音呢？说好的ios5以上都兼容呢？我这是假的？我天。。。ide

缘由分析

不甘心失败的我，开始了新的一轮测试。我发现没有问题，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>

复制代码

因为本人没有苹果的产品，这个示例就不贴图了，亲们能够本身测试查看效果ui

结论

position:fixed在苹果的产品中并无实现相对浏览器窗口定位。其实现的功能是相对最近的容许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其全部父元素的兄弟元素。

最后抱怨一句：苹果浏览器实现的这一伪功能实在是太坑了。