Last Updated: February 25, 2016
· heldrida

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">

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


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

.top {
 position: relative;

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!