jquery – 复杂的Webkit Bug？相对位置Z-Index溢出隐藏CSS3变换

与其他现代浏览器相比,下面的代码( JSFiddle Preview)在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').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>

@H_197_4@预期的结果：它应该有3个DIV(幻灯片)在循环中连续动画到左边,包括幻灯片中受尊重的彩色框.如果单击彩色框,则会显示一个灯箱,其中彩色框的RBG颜色在受尊重的幻灯片中单击.再次单击以关闭灯箱.在浅灰色父DIV之前应用3D变换,同时隐藏溢出的位置,Jquery在绝对定位幻灯片DIV上设置动画.

@H_197_4@Webkit中的结果：在您在桌面上调整浏览器窗口大小或在平板电脑上单击JSfiddle面板调整大小手柄(或捏/ zoon)之前,幻灯片中的彩色框似乎根本不会移动/渲染.在不同的调试注释中,如果3D变换动画未循环,则在动画停止时,DIV将按预期进行渲染.

@H_197_4@测试结果显示Webkit错误：

@H_197_4@> Win7 IE10：通过@H_419_11@> Win7 Chrome：通过@H_419_11@> Win7 FF：通过@H_419_11@> Win7 Safari：失败@H_419_11@> Win8 IE11：通过@H_419_11@> Android Chrome：失败@H_419_11@> iOS Safari：失败@H_419_11@> iOS Chrome：失败@H_419_11@> MacOS Safari：失败@H_419_11@> MacOS Chrome：失败

@H_197_4@注意(JSFiddle Preview)没有3D变换,代码可以工作,尽管桌面上的动画不流畅.灯箱工作正常.

@H_197_4@注意(JSFiddle Preview)在父DIV之后使用3D变换,动画是平滑的并且灯箱工作正常.

@H_197_4@注意(JSFiddle Preview)-webkit-transform：rotate(0deg)应用于带溢出的父DIV,动画在平板电脑上不稳定,但3D变换可以存在于父DIV之前或幻灯片DIV中.但是创建了另一个问题.父溢出DIV的z-index低于灯箱,使得暗灯箱DIV显示在父DIV内的白色对话框DIV上方.

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

@H_197_4@任何帮助表示赞赏.