Chrome Rendering Bug Elements Visibility on Z-Index

Today I’ve been working on a mobile version of a web app where one element goes on top of another when the user is scrolling. The element on top is only rendered properly after a few milliseconds.

For example:

<div class="container">

    <div class="background">
      <img>
    </div>

   <div class="top">
    This goes over the div.background element!
    <img>
   </div>

</div>

.background {
  position: fixed;
  top: 0;
  left: 0;
 z-index: 0;
}

.top {
 position: relative;
 z-index:1;
}

To fix this issue, I’ve found that by using the following css property and value in the top element fixes it:

-webkit-transform: translateZ(0);

Hope this helps!