Android browser position: z-index issue fixed

Let me share an example for better illustration:

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, # box4 (blue) appears on top of other elements unless I give the z-index property to one of them. This is the expected result.

In the default Android browser (tested to 4.1) # box4 is under # box1 and # box3.

Does anyone know a CSS workaround to fix it?

thank!