与其他现代浏览器相比,下面的代码(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面板调整大小手柄(或捏/zoon)。另一个调试注意事项是,如果3D变换动画没有循环,则当动画停止时,DIV将按预期进行渲染。
测试结果显示Webkit错误:
- Win7 IE10:通过
- Win7 Chrome:通行证
- Win7 FF:通过
- Win7 Safari:失败
- Win8 IE11:通过
- Android Chrome:失败
- iOS Safari:失败
- iOS Chrome:失败
- MacOS Safari:失败
- MacOS Chrome:失败
注意(JSFiddle预览)如果没有3D转换,代码可以工作,尽管动画在桌面上并不平滑。灯箱工作正常。
请注意(JSFiddle预览)在父DIV之后进行3D变换时,动画是平滑的,灯箱工作良好。
请注意(JSFiddle Preview),-webkit transform:rotate(0deg)应用于溢出的父DIV,动画在平板电脑上是断断续续的,但3D变换可以存在于父DIV之前或幻灯片DIV内。然而,又产生了另一个问题。父级溢出DIV的z索引低于灯箱,使深色灯箱DIV出现在父级DIV内的白色对话框DIV上方。
我知道这是一个非常奇怪的例子,但它是一个更私人的复杂代码的淡化例子。三维变换必须在父DIV之前,或者在幻灯片内。灯箱对话框必须在父DIV或幻灯片内,但显示在深色灯箱DIV上方,而深色灯箱DIF不能在父DIF内,因为隐藏的溢出不会使深色灯箱DIW显示在浏览器全屏中。
感谢您的帮助。
如果您阅读了Chrome中的GPU加速合成http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome你会发现renderLayer将在以下情况下获得自己的合成层:
- 层具有3D或透视转换CSS属性
- 层由使用加速视频解码的视频元素使用
- 层由具有三维或二维上下文的画布元素使用
- 层使用CSS动画作为其不透明度或使用动画的webkit变换
- 层有一个具有合成层的子体
- 层有一个具有较低z索引的同级,该同级具有一个合成层(换句话说,该层在合成层的顶部渲染)
添加或删除3D变换时会得到不同的结果,因为代码要么经过GPU加速路径,要么经过软件渲染路径。GPU加速路径对你拥有的GPU/驱动程序非常敏感,如果你看到任何奇怪的图形故障,你应该首先检查的一件事是,当你在中关闭硬件加速时,它们是否仍然存在chrome://flags/
这三个例子都适用于Chrome OSX,所以这很可能是特定显卡的浏览器错误。如果你能找到一个基本的案例,我建议用你的GPU信息向chrome项目报告这个错误。
我认为硬件加速可能是问题所在。。你可以看看这个问题和公认的答案。。。
更改此
尝试chrome://gpu
并查找差异。。