与其他现代浏览器相比，下面的代码 ( 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').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 变换，位置相对并隐藏溢出，Jquery 在绝对定位幻灯片 DIV 上进行动画处理。
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：失败
注意（JSFiddle Preview）没有 3D 变换，代码可以工作，虽然桌面上的动画不流畅。灯箱工作正常。
注意（JSFiddle Preview）在父 DIV 之后使用 3D 变换，动画很流畅，灯箱工作正常。
注意 ( JSFiddle Preview ) 使用-webkit-transform: rotate(0deg)应用于父 DIV 并溢出，动画在平板电脑上不稳定，但 3D 变换可以存在于父 DIV 之前或幻灯片 DIV 中。但是又产生了另一个问题。父溢出 DIV 的 z-index 低于灯箱，使深色灯箱 DIV 显示在父 DIV 内的白色对话框 DIV 上方。
我知道这是一个非常奇怪的例子，但它是更私人的复杂代码的淡化例子。3D 变换必须在父 DIV 之前，或在幻灯片中。灯箱对话框必须在父DIV或幻灯片内，但出现在暗灯箱DIV上方，不能在父DIV内，因为溢出隐藏不会使暗灯箱DIV出现全浏览器屏幕。
任何帮助表示赞赏。