Mobile Safari / Safari 固定位置不重绘

Question

我有一个隐藏在主页内容后面的菜单的页面。单击按钮时，内容 (#container) 会向左滑动，显示菜单。

  <div id="container">
    <button onclick="toggleNavState()">NAV TOGGLE</button>

    <div id="footer">FOOTER</div>
  </div>

  <div id="side_nav">
      <ul>
          <li><a href="/">Home</a></li>
          <li><a href="xxxxx">xxxxxxxxx</a></li>
          <li><a href="xxxxx">xxxxxxxxx</a></li>
          <li><a href="xxxxx">xxxxxxxxx</a></li>
          <li><a href="xxxxx">xxxxxxxxx</a></li>
          <li><a href="xxxxx">xxxxxxxxx</a></li>
          <li><a href="xxxxx">xxxxxxxxx</a></li>
      </ul>

    <script type="text/javascript">
        function toggleNavState() {
            elem = document.getElementById("container"); 
            var className1 = 'active';
            var className2 = 'inactive';
            elem.className = (elem.className == className1)?className2:className1;

        }

#container {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 520px;
  position: absolute;
  z-index: 1;
  -webkit-transition: all 0.2s ease-out;
  box-shadow: 0 0 20px #000;
  background: #FFF;
}

#container.active {
  right: 250px;
}

#footer {
  width: 100%;;
  position: fixed;
  bottom: 0;
}

我已经在几个网站上使用过这种技术，而且效果很好。当我尝试添加固定页脚时出现问题。

页脚应该在#container 内保持固定，因为它会向左滑动，并且在我测试过的所有浏览器中都如此，除了 Mobile Safari 和 Safari。

如果#container 中存在block 级别元素，则页脚似乎改为相对于视口定位。如果删除了block 元素，它就可以正常工作。

没有块元素：

带块元素：

我怀疑这是一个重绘问题，因为当屏幕滚动到底部 (MobileSafari) 或调整大小 (Safari) 时，页脚会重新回到 #container 内的正确位置。

此外，使用Mr. Darcy Murphy's 技术强制重绘也会导致页脚快速回到正确位置。

以下示例仅适用于在 Safari 中查看。您不会在其他浏览器中看到该问题。

WORKING EXAMPLE

NON-WORKING EXAMPLE

谁能解释为什么会发生这种情况？

Answer 1

登陆这里，试图在移动设备上使用position: absolute 寻找类似行为的答案（适用于桌面）。

我怀疑这是一个重绘问题，因为当屏幕滚动到底部 (MobileSafari) 或调整大小 (Safari) 时，页脚会重新回到正确位置

是的，许多其他触发重绘的操作也为我解决了这个问题。例如：

• 在开发工具上打开/关闭 CSS 类
• 调整开发工具的大小

使用translateZ(0) 解决此问题，请参阅：https://stackoverflow.com/a/27971913/7852

Answer 2

当我将固定位置更改为绝对位置时，它对我有用。

#footer {
    width: 100%;;
    position: absolute;
    bottom: 0;
}