Android browser's position: fixed and z-index issue

Question

Let me share an example for better illustrating:

jsFiddle: http://jsfiddle.net/yhurak3e/

Or you can read it here:

#box1 {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  background: green;
  z-index: 5;
}

#box2 {
  height: 300px;
  position: relative;
  background: yellow;
}

#box3 {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
  background: black;
  opacity: .8;
  z-index: 10;
}

#box4 {
  left: 20px;
  top: 20px;
  right: 20px;
  bottom: 20px;
  position: fixed;
  background: blue;
  z-index: 11;
}

<div id="box1">box1</div>
<div id="box2">box2
  <div>
    <div id="box4">box4</div>
  </div>
</div>
<div id="box3">box3</div>

In every other browser, the #box4 (the blue one) appears on the top of the other elements unless I give a z-index property to one of it's ancestors. This is the expected result.

In Android's default browser (tested on 4.1) the #box4 lies under the #box1 and #box3.

Does anybody know a CSS workaround to fix it?

Thx!

Answer 1

You have to apply the above mentioned workaround on the parent element or elements of the #box4, along with applying the -webkit-transform:translateZ(0); to the #box4 like this:

#box1 {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  background: green;
  z-index: 5;
}

#box2 {
  height: 300px;
  position: relative;
  background: yellow;
}

#box3 {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
  background: black;
  opacity: .8;
  z-index: 10;
}

#box4 {
  left: 20px;
  top: 20px;
  right: 20px;
  bottom: 20px;
  position: fixed;
  background: blue;
  z-index: 11;
}

#box1,
#box2 {
  /*parent*/
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
}

#box4 {
  /*child*/
  -webkit-transform: translateZ(0);
  /* Chrome, Safari, Opera */
  transform: translateZ(0);
}

<div id="box1">box1</div>
<div id="box2">
  box2
  <div>
    <div id="box4">box4</div>
  </div>
</div>
<div id="box3">box3</div>

Answer 2

A workaround for a similar problem from this thread is to apply

-webkit-transform:translateZ(0);

to #box4.