复杂的 Webkit 错误？相对位置 + Z-Index + 溢出隐藏 + CSS3 变换

代码 （JSFiddle 预览 http://jsfiddle.net/detailCode/Yt22q/1/）与其他现代浏览器相比，下面的 Webkit 会产生意想不到的结果：

<script type="text/javascript">
jQuery(document).ready(function($) {
    RunFunction();

    $('.ColorSquare').click(function() {
        $('#Lightbox').css('display','block');
        $('#ShowColorSquare').css('display','block');
        $('#ShowColorSquare').css('z-index','10');
        $('#ShowColorSquare').css('left',$('#ShowColorSquare').parent().width() / 2 - 50);
        $('#ShowColorSquare').css('top',$('#ShowColorSquare').parent().height() / 2 - 50);
        $('#ShowColorSquare').html('The color is: ' + $(this).css('background-color'));
    });
    $('#ShowColorSquare').click(function() {
        $('#Lightbox').css('display','none');
        $('#ShowColorSquare').css('display','none');
        $('#ShowColorSquare').html('');
    });
    $('#Lightbox').click(function() {
        $('#Lightbox').css('display','none');
        $('#ShowColorSquare').css('display','none');
        $('#ShowColorSquare').html('');
    });
});
function RunFunction() {
    $('#slide1').animate({
        left: '-=310'
    }, 3000);
    $('#slide2').animate({
        left: '-=310'
    }, 3000);
    $('#slide3').animate({
        left: '-=310'
    }, 3000, function() {
        if($('#slide1').css("left") == '-310px') {
            $('#slide1').css("left",620);
        }
        if($('#slide2').css("left") == '-310px') {
            $('#slide2').css("left",620);
        }
        if($('#slide3').css("left") == '-310px') {
            $('#slide3').css("left",620);
        }   
        RunFunction(); 
    });
}
</script>
<style>
#Spin {
    width:50px;
    height:50px;
    margin: 15px 0px 15px 15px;
    background-color:#960;
    animation-name:Spin;
    animation-duration:5s;
    transform-origin:50% 50%;
    animation-iteration-count:infinite;

    -webkit-animation-name:Spin;
    -webkit-animation-duration:5s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count:infinite;
}
@keyframes Spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes Spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
.ColorSquare {
    height:100px;
    width:100px;
    position:absolute;
}
#ShowColorSquare {
    height:100px;
    width:100px;
    position:absolute;
    background-color:white;
    display:none;
}
#Lightbox {
    background-color:#000;
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    opacity:.8;
    display:none;
    z-index:5;
}
.Panel {
    width:225px;
    height:250px;
    position:absolute;
    background-color:#6C6C6C;
}
</style>

<div id="Spin"></div>

<div style="height:260px;width:500px;overflow-x:hidden;background:#CCC;">
    <div style="height:250px;width:500px;position:relative;">
        <div id="slide1" class="Panel" style="top:0px;left:0px;">
            <div>Slide 1</div>
            <div style="position:relative;margin-top:10px;width:225px;height:200px;">
                <div class="ColorSquare" style="background-color:#093;left:0px;top:0px;"></div>
                <div class="ColorSquare" style="background-color:#C9F;left:100px;top:100px;"></div>
            </div>
        </div>
        <div id="slide2" class="Panel" style="top:0px;left:310px;">
            <div>Slide 2</div>
            <div style="position:relative;margin-top:10px;width:225px;height:200px;">
                <div class="ColorSquare" style="background-color:#CF9;left:0px;top:0px;"></div>
                <div class="ColorSquare" style="background-color:#C63;left:100px;top:100px;"></div>
            </div>
        </div>
        <div id="slide3" class="Panel" style="top:0px;left:620px;">
            <div>Slide 3</div>
            <div style="position:relative;margin-top:10px;width:225px;height:200px;">
                <div class="ColorSquare" style="background-color:#696;left:0px;top:0px;"></div>
                <div class="ColorSquare" style="background-color:#F96;left:100px;top:100px;"></div>
            </div>
        </div>
        <div id="ShowColorSquare"></div>
    </div>
</div>
<div id="Lightbox"></div>

预期结果： 应该有 3 个 DIV（幻灯片）在循环中向左连续动画，包括幻灯片中受人尊敬的彩色框。如果单击彩色框，则会显示一个灯箱，其中包含在相关幻灯片中单击的彩色框的 RBG 颜色。再次单击可关闭灯箱。同时在浅灰色父 DIV 之前应用 3D 变换，相对位置与溢出隐藏，并在绝对定位幻灯片 DIV 上使用 Jquery 动画。

Webkit 中的结果：除非您在桌面上调整浏览器窗口的大小，或者在平板电脑上单击 JSFiddle 面板调整大小手柄（或捏合/缩放），否则幻灯片中的彩色框根本不会移动/渲染。在不同的调试说明中，如果 3D 变换动画未循环，则当动画停止时，DIV 将按预期渲染。

测试结果显示 Webkit 错误：

• Win7 IE10：通过
• Win7 Chrome：通过
• Win7 FF：通过
• Win7 Safari：失败
• Win8 IE11：通过
• Android Chrome：失败
• iOS Safari：失败
• iOS Chrome：失败
• MacOS Safari：失败
• MacOS Chrome：失败

Notice (JSFiddle 预览 http://jsfiddle.net/detailCode/Yt22q/）在没有 3D 变换的情况下，代码可以工作，尽管动画在桌面上不流畅。灯箱工作正常。

Notice (JSFiddle 预览 http://jsfiddle.net/detailCode/Yt22q/2/）在父 DIV 之后进行 3D 变换，动画流畅，灯箱工作正常。

Notice (JSFiddle 预览 http://jsfiddle.net/detailCode/Yt22q/3/) with -webkit-transform：旋转（0deg）应用于带有溢出的父 DIV 时，动画在平板电脑上会断断续续，但 3D 变换可以存在于父 DIV 之前或幻灯片 DIV 内。但又产生了另一个问题。父溢出 DIV 的 z 索引低于灯箱，使得深色灯箱 DIV 出现在父 DIV 内的白色对话框 DIV 上方。

我知道这是一个非常奇怪的示例，但它是更私密的复杂代码的淡化示例。 3D 变换必须位于父 DIV 之前或幻灯片内。灯箱对话框必须位于父 DIV 或幻灯片内，但出现在深色灯箱 DIV 上方，而深色灯箱 DIV 不能位于父 DIV 内，因为溢出隐藏不会使深色灯箱 DIV 出现在整个浏览器屏幕中。

任何帮助表示赞赏。

如果您阅读了 Chrome 中的 GPU 加速合成http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome你会发现 renderLayer 在以下情况下将获得它自己的合成层：

1. 图层具有 3D 或透视变换 CSS 属性
2. 层由使用加速视频解码的视频元素使用
3. 图层由具有 3D 或 2D 上下文的画布元素使用
4. 图层使用 CSS 动画来实现不透明度或使用动画 webkit 变换
5. 图层有一个具有合成图层的后代
6. 图层有一个具有较低 z-index 的同级图层，该图层具有合成图层（换句话说，该图层渲染在合成图层之上）

添加或删除 3D 变换时，您会得到不同的结果，因为代码要么经过 GPU 加速路径，要么经过软件渲染路径。 GPU 加速路径对您拥有的 GPU/驱动程序非常敏感，如果您看到任何奇怪的图形故障，您应该检查的第一件事就是当您在 chrome:// 中关闭硬件加速时它们是否仍然存在。旗帜/

所有三个示例都适用于 Chrome OSX，因此这可能是特定显卡的浏览器错误。如果您能找到一个基本案例，我建议您使用 GPU 信息向 chromium 项目报告此错误。