1

我有一个隐藏在主页内容后面的菜单的页面。单击按钮时，内容 ( #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.

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

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

工作示例

非工作示例

任何人都可以解释为什么会这样吗？

4

2 回答 2

0

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

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

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

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

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

于 2019-10-04T04:13:08.490 回答
-2

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

#footer {
    width: 100%;;
    position: absolute;
    bottom: 0;
}
于 2013-06-12T01:08:34.110 回答