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!

comments powered by Disqus