我正在尝试寻找一种解决方法来解决 Mobile Safari 的 bug…
如果您将带有
position: fixed
和 height: 100vh
的 background: green
元素(称之为“抽屉”)并将其扔到 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;
}
我曾经遇到过类似的问题。我最终在固定元素中使用这个规则解决了它:
-webkit-transform: translate3d(0,0,0);
希望对你也有帮助。