7
下面的代碼（JSFiddle Preview）產生的Webkit的意想不到的效果，相較於其他現代瀏覽器：複雜的Webkit Bug？相對位置+ Z指數+溢出隱藏+ CSS3變換
<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顏色。再次點擊關閉燈箱。雖然3D變換應用於淺灰色父DIV之前，但隱藏位置與溢出相關，Jquery使用絕對定位幻燈片DIV生成動畫。
Webkit中的結果：在調整桌面上的瀏覽器窗口大小之前，幻燈片中的彩色框不會移動/呈現，或者在平板電腦上單擊JSFiddle面板調整大小手柄（或捏/ zoon） 。在另一個調試筆記中，如果3D變換動畫不循環，則當動畫停止時，DIV按預期呈現。
測試結果顯示的Webkit漏洞：
- Win7的IE10：通過
- Win7的瀏覽器：通過
- Win7的FF：通過
- Win7的Safari瀏覽器：失敗
- Win8的IE11：通過
- Android Chrome瀏覽器：失敗
- iOS Safari：失敗
- iOS版Chrome瀏覽器：失敗
- MacOS的Safari瀏覽器：失敗
- MacOS的瀏覽器：失敗
通知（JSFiddle Preview）未經3D變換，代碼工作，雖然動畫不上桌面光滑。燈箱工作正常。
注意（JSFiddle Preview）在父DIV之後進行3D變換，動畫平滑，燈箱工作正常。
通知（JSFiddle Preview）與-webkit變換：旋轉（0deg）施加到與溢流父DIV，動畫是關於片劑波濤洶涌，但3D變換父DIV之前或滑動內可以存在資料覈實。另一個問題是創建。父溢出DIV的Z-index低於燈箱，使得暗淡的DIV出現在父DIV內的白色對話框DIV上方。
我知道這是一個非常奇怪的例子，但它是一個更私人複雜代碼淡化的例子。 3D變換必須位於父DIV之前或幻燈片中。燈箱對話框必須位於父DIV或幻燈片中，但出現在黑暗的燈箱DIV上方，因爲隱藏的溢出不會使黑色燈箱DIV顯示爲完整的瀏覽器屏幕，所以不能在父DIV內。
任何幫助表示讚賞。
對我的作品在Chrome 28在OS X上而不是在Safari 6 – insertusernamehere
任何人有任何不同的測試情況下，像insertusernamehere？ – detailCode
我相信Chrome的新版本正在遠離webkit。這解釋了爲什麼上個月它在Win7 Chrome中崩潰，現在可以運行。 – detailCode