移动 Safari 不会在视口之外渲染固定元素，除非它没有子元素答案

【问题标题】：Mobile Safari not rendering fixed element outside of viewport unless it has no children移动 Safari 不会在视口之外渲染固定元素，除非它没有子元素
【发布时间】：2019-10-23 00:01:39
【问题描述】：

我正在尝试为看起来像 Mobile Safari 的错误寻找解决方法……

如果您将带有height: 100vh 和background: green 的position: fixed 元素（称为“抽屉”）扔到Mobile Safari，它将在浏览器工具栏后面呈现半透明绿色（如您所料） .但是，只有当“抽屉”没有文本/子项时，它才会这样做。

任何文本添加到“抽屉”的那一刻，Mobile Safari 不仅会停止渲染工具栏后面的半透明绿色，而且在工具栏隐藏动画完成之前不会渲染“抽屉”的底部。显然，这看起来像垃圾，是不可取的。

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

Plunker 链接说明了问题（在 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;
}

【问题讨论】：

标签： css mobile-safari

【解决方案1】：

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

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

希望对你也有帮助。

【讨论】：