Css Safari rotate3d GPU组合错误

在z-index:2绝对位于z-index:1绝对位置画布上方的块元素上应用transform:rotate3d（x、y、z、angle）时，我在Safari中遇到了一个奇怪的GPU合成错误，其中块元素的一部分没有渲染（或者可能在画布下方）。我已经做了一个演示，清楚地展示了Safari中的bug。它在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）到更改画布的GlobalComposite操作，我几乎尝试了所有方法。值得注意的是，如果我将画布替换为具有背景图像的块元素，则不会出现错误。这一定和画布有关

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

期待您的来信–谢谢