css – z-index chrome bug

我遇到了一个非常烦人的错误,似乎只发生在 Windows和OS X上：父级具有固定位置的元素的z-index在Chrome上不起作用！我将奇怪的情况转换为简单的代码：

HTML：

<div id="mask">
    &nbsp;
</div>

<div id="box">
    <div class="below-mask circle">
        should be below the mask
    </div>

    <div class="above-mask circle">
        should be above the mask
    </div>
</div>​

CSS：

body {
    font-family: Verdana;
    font-size: 9px;
    margin: 0px;
}

#box {
    position: fixed;
}

#mask {
    position: absolute;
    left: 0px;
    top: 0px;
    BACkground-color: rgba(0,0.5);
    width: 100%;
    height: 100%;
    z-index: 9998;
}

.circle {
    position: relative;
    BACkground-color: rgba(255,204,0.75);
    border-radius: 75px;
    line-height: 150px;
    margin: 50px;
    text-align: center;
    width: 150px;
    height: 150px;
}

.above-mask {
    z-index: 9999;
}

.below-mask {
    z-index: 9997;
}​

沙箱：http://jsfiddle.net/gibatronic/umbgp/

我在OS X和Windows上的Internet Explorer 9,Firefox 15,Opera 12.02和Safari 5.1.7上进行了测试,所有这些都按预期显示.
我还在Ubuntu 12.10上进行了测试,它适用于包括Chrome在内的所有浏览器！
我甚至在Kindle 4浏览器上测试过它的功能！

我想知道是否有人知道解决这个问题的任何修复方法！