[英]Complex Webkit Bug? Relative Position + Z-Index + Overflow Hidden + CSS3 Transform
下面的代碼( 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變換,同時隱藏溢出的位置,在絕對定位幻燈片DIV上使用Jquery動畫。
Webkit中的結果:在您在桌面上調整瀏覽器窗口大小或在平板電腦上單擊JSFiddle面板調整大小手柄(或捏/ zoon)之前,幻燈片中的彩色框似乎根本不會移動/渲染。 在不同的調試注釋中,如果3D變換動畫未循環,則當動畫停止時,DIV將按預期進行渲染。
顯示Webkit錯誤的測試結果:
注意( 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顯示為完整的瀏覽器屏幕。
任何幫助表示贊賞。
如果您在Chrome上閱讀GPU加速合成http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome,您會發現renderLayer會在以下情況下獲得自己的合成層:
添加或刪除3D變換時,您會得到不同的結果,因為代碼要么通過GPU加速路徑,要么通過軟件渲染路徑。 GPU加速路徑對你擁有的GPU /驅動程序非常敏感,如果你看到任何奇怪的圖形故障,你應該檢查的第一件事是當你在chrome中關閉硬件加速時它們是否仍然存在://標志/
這三個示例都適用於Chrome OSX,因此這可能是特定圖形卡的瀏覽器錯誤。 如果你能找到一個基本案例,我會建議用你的GPU信息向chrome項目報告這個bug。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.