Позиция браузера Android: исправлена ​​проблема с z-индексом

Позвольте мне поделиться примером для лучшей иллюстрации:

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

Или вы можете прочитать его здесь:

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

В любом другом браузере #box4 (синий) появляется поверх других элементов, если только я не передам свойство z-index одному из его предков. Это ожидаемый результат.

В браузере Android по умолчанию (проверено на версии 4.1) #box4 находится под #box1 и #box3.

Кто-нибудь знает обходной путь CSS, чтобы исправить это?

Спасибо!