除非没有子项，否则 Mobile Safari 不会在视口外呈现固定元素

Question

我正试图找到一个看起来像 Mobile Safari 错误的解决方法…

如果你拿一个带有 height: 100vh 和 background: green 的 position: fixed 元素（称之为 "drawer"）并将它扔到 Mobile Safari，它会在后面呈现半透明绿色浏览器工具栏（如您所料）。但是，只有 如果 "drawer" 没有文本/子项。

当任何文本被添加到 "drawer" 时，Mobile Safari 不仅会停止渲染工具栏后面的半透明绿色，而且直到工具栏之后才会渲染 "drawer" 的底部隐藏动画完成。显然，这看起来像垃圾，是不可取的。

如何让抽屉呈现在工具栏后面，即使它有内容？

Plunker link 说明问题（查看 iPhone）：http://plnkr.co/edit/G0mJf7H46KWhlAVJH7HN?p=preview

HTML:

<div class="drawer left">
  Drawer with contents
</div>
<div class="drawer right"></div>
<p class="lorem">Lorem ipsum…</p>

CSS:

.drawer {
  background: green;
  position: fixed;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 150px;
  min-height: 100vh;
}
.drawer.left {
  left: 0;
}
.drawer.right {
  right: 0;
}

Answer 1

我曾经遇到过类似的问题。我终于在固定元素中使用此规则解决了它：

-webkit-transform: translate3d(0,0,0);

希望对你也有帮助。

除非没有子项，否则 Mobile Safari 不会在视口外呈现固定元素

Mobile Safari not rendering fixed element outside of viewport unless it has no children

css

mobile-safari