html - 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 级别的元素，则页脚似乎是相对于视口(viewport)定位的。如果删除 block 元素，它会正常工作。

没有 block 元素:

带 block 元素:

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

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

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

WORKING EXAMPLE

NON-WORKING EXAMPLE

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

Answer 1

登陆此处试图在移动设备上使用 position: absolute 寻找类似行为的答案(适用于桌面设备)。

I suspect this is a re-painting issue as when the screen is scrolled to the bottom (MobileSafari) or resized (Safari) the footer snaps back into it's correct position

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

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

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