談一談蘋果手機關於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>

複製代碼