移动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之外，它在我测试过的所有浏览器中都会固定。

如果block中有#container级别元素，则页脚似乎相对于视口定位。如果删除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;
}