Safari rotate3d GPU组合bug

Question

在块元素上应用transform：rotate3d（x，y，z，angle）时z-index：2绝对位于绝对定位的画布上面，z-index：1，我在Safari中得到了这个奇怪的GPU组合错误块元素的一部分未被渲染（或者可能在画布下方）。我已经制作了demo，清楚地展示了Safari中的错误。它在Firefox和Chrome中运行良好。 CSS如下：

#container {
    position: relative;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    z-index: 1;
}

#overlay {
    position: absolute;
    z-index: 2;
    top: 100px;
    left: 300px;
    width: 300px;
    height: 300px;
    background-color: #000;
    -webkit-transform: rotate3d(1, 0, 0, -20deg);
}

任何人都可以解释为什么会发生这种情况并提供潜在的解决方案吗？我已经尝试了几乎从应用translate3d（0,0,0）到更改画布的globalCompositeOperation的所有内容。值得注意的是，如果我用具有背景图像的块元素替换画布，则该错误不会出现。它必须与画布有关。

我在Mac OS X 10.9.4上使用Safari 7.0.5。

期待您的回音 - 谢谢！