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:

HTML:

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

CSS:

#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;
}

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 anchestors. 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

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

-webkit-transform:translateZ(0);

to #box4.