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

Issue

I'm trying to find a work-around for what looks like a Mobile Safari bug…

If you take a position: fixed element with height: 100vh and background: green (call it a "drawer") and throw it at Mobile Safari, it will render translucent green behind the browser toolbar (as you'd expect). However, it only does this if the "drawer" has no text / children.

The moment any text is added to "drawer", Mobile Safari will not only stop rendering the translucent green behind the toolbar, but it will not render the bottom portion of "drawer" until after the toolbar hide animation finishes. Obviously, this looks like garbage, and is undesirable.

How do I get the drawer to render behind the toolbar, even when it has contents?

---

Plunker link illustrate the issue (view on an 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;
}

Solution

I once had a similar issue. I finally solved it by using this rule in the fixed element:

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

Hope it helps you too.

Answered By - Periplo