复杂的Webkit Bug？相对位置+ Z索引+溢出隐藏+ CSS3变换 [英] Complex Webkit Bug? Relative Position + Z-Index + Overflow Hidden + CSS3 Transform
问题描述
与其他现代浏览器相比，以下代码（ JSFiddle Preview ）在Webkit中产生了意想不到的结果：
< script type =text / javascript>
jQuery（document）.ready（function（$）{
RunFunction（）;
$（'ColorSquare'）。 $（'＃Lightbox'）。css（'display'，'block'）;
$（'＃ShowColorSquare'）。css（'display'，'block'）;
$（' ShowColorSquare'）。css（'z-index'，'10'）;
$（'＃ShowColorSquare'）。css（'left'，$（' / 2 - 50）;
$（'＃ShowColorSquare'）。css（'top'，$（'＃ShowColorSquare'）。 （'#ShowColorSquare'）。html（'The color is：'+ $（this）.css（'background-color'））;
}）;
$（'＃ShowColorSquare'）。 （'display'，'none'）;
$（'＃ShowColorSquare'）。css（'display'，'none' ）;
$（'＃ShowColorSquare'）。html（''）;
}）;
$（'＃Lightbox'）。 （'#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（$ ）.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 =slide1class =Panelstyle =top：0px; left：0px;>
< div>幻灯片1< / div>
< div style =position：relative; margin-top：10px; width：225px; height：200px;>
< div class =ColorSquarestyle =background-color：＃093; left：0px; top：0px;>< / div>
< div class =ColorSquarestyle =background-color：＃C9F; left：100px; top：100px;>< / div>
< / div>
< / div>
< div id =slide2class =Panelstyle =top：0px; left：310px;>
< div>投影片2< / div>
< div style =position：relative; margin-top：10px; width：225px; height：200px;>
< div class =ColorSquarestyle =background-color：＃CF9; left：0px; top：0px;>< / div&
< div class =ColorSquarestyle =background-color：＃C63; left：100px; top：100px;>< / div>
< / div>
< / div>
< div id =slide3class =Panelstyle =top：0px; left：620px;>
< div>投影片3< / div>
< div style =position：relative; margin-top：10px; width：225px; height：200px;>
< div class =ColorSquarestyle =background-color：＃696; left：0px; top：0px;>< / div>
< div class =ColorSquarestyle =background-color：＃F96; left：100px; top：100px;>< / div>
< / div>
< / div>
< div id =ShowColorSquare>< / div>
< / div>
< / div>
< div id =Lightbox>< / div>
预期结果：应该有3个DIV包括幻灯片中的相关彩色框。如果您点击彩色框，灯箱会在相应的幻灯片中点击彩色框的RBG颜色。再次单击以关闭Lightbox。所有同时在浅灰色父代DIV之前应用3D变换，相对位置相对于隐藏溢出，在绝对定位幻灯片DIV上使用Jquery动画。
Webkit中的结果：在幻灯片中的彩色框根本不会移动/呈现，直到您调整桌面上的浏览器窗口大小，或单击平板电脑上的JSFiddle面板调整大小手柄（或捏/ zoon）。在不同的调试说明中，如果3D变换动画不循环，则当动画停止时，DIV按预期呈现。
测试结果显示Webkit错误：
- Win7 IE10：通过
- Win7 Chrome：Pass
- Win7 FF ：传递
- Win7 Safari：失败
- Win8 IE11：通过
- Android Chrome： >
- iOS Safari：失败
- iOS Chrome：失败
- MacOS Safari：失败
- MacOS Chrome：失败
注意（ JSFiddle Preview ）没有3D变换，代码工作，虽然动画在桌面上不流畅。灯箱效果很好。
通知（ JSFiddle预览）在父DIV之后进行3D变换，动画是流畅的，Lightbox效果很好。
注意（ JSFiddle预览）使用<-webkit-transform：rotate（0deg）应用于父DIV的溢出，动画在平板电脑上断断续续，变换可以存在于父DIV之前或幻灯片DIV内。另一个问题是创建。父溢出DIV具有比lightbox更低的z-index，使暗灯箱DIV出现在父DIV中的白色对话框DIV之上。
我知道这是一个非常奇怪的例子，但它是一个浇水的例子更多的私人复杂的代码。 3D变换必须在父DIV之前，或在幻灯片内。 Lightbox对话框必须在父DIV或幻灯片内，但是出现在暗灯箱DIV上方，不能在父DIV中，因为溢出隐藏不会使暗灯箱DIV显示为完整的浏览器屏幕。
$如果您在Chrome上阅读GPU加速复合 http://www.chromium.org/developers/design -documents / gpu-accelerated-compositing-in-chrome ，您会发现renderLayer在以下情况下会获得自己的合成图层：
- 图层具有3D或透视变换CSS属性
- 图层由视频元素使用加速视频解码
- 图层由画布元素具有3D或2D上下文
- 图层使用CSS动画作为其不透明度或使用动画webkit变换
- 图层有一个后代，层
- 图层具有较低z-index的同级，其具有合成图层（换句话说，图层呈现在合成图层的顶部）
添加或删除3D变换时，您会得到不同的结果，因为代码要经过GPU加速路径或软件渲染路径。 GPU加速路径对于你有什么GPU /驱动程序非常敏感，如果你看到任何奇怪的图形毛刺，你应该检查的第一件事是，如果他们仍然存在，当你关闭硬件加速关闭在chrome：// flags /
这三个例子适用于Chrome OSX，因此这可能是特定显卡的浏览器错误。如果你可以找到一个基本案例，我建议报告这个错误铬项目与您的GPU信息。
The code (JSFiddle Preview) below produces unexpected results in Webkit in comparison to other modern browsers:
<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>
Expected Results: It's supposed to have 3 DIVs (slides) continuously animate to the left in a loop, including the respected colored boxes within the slides. If you click on a colored box, a lightbox shows with the RBG color of the colored box clicked within the respected slide. Click again to close the lightbox. All while a 3D transform is applied before the light gray parent DIV, with position relative with overflow hidden, with Jquery animate on absolute positioning slide DIVs.
Results in Webkit: The colored boxes within the slides don't appear to move/render at all until you resize the browser window on a desktop, or click the JSFiddle panel resize handle (or pinch/zoon) on a tablet. On a different debug note, if the 3D transform animation is not looping, when the animation stops, DIVs render as expected.
Test results showing Webkit bug:
- Win7 IE10: Pass
- Win7 Chrome: Pass
- Win7 FF: Pass
- Win7 Safari: Fail
- Win8 IE11: Pass
- Android Chrome: Fail
- iOS Safari: Fail
- iOS Chrome: Fail
- MacOS Safari: Fail
- MacOS Chrome: Fail
Notice (JSFiddle Preview) without the 3D transform, the code works, although the animation is not smooth on desktop. The lightbox works fine.
Notice (JSFiddle Preview) with the 3D transform after the parent DIV, the animation is smooth and the lightbox works fine.
Notice (JSFiddle Preview) with -webkit-transform: rotate(0deg) applied to the parent DIV with the overflow, the animation is choppy on tablets, but the 3D transform can exist before the parent DIV or within the slide DIVs. Another problem is created though. The parent overflow DIV has a lower z-index than the lightbox, making the dark lightbox DIV appear above the white dialog DIV that's within the parent DIV.
I know this is a very weird example, but it's a watered down example of more private complex code. The 3D transform must be before the parent DIV, or within a slide. The lightbox dialog must be within the parent DIV or slide, but appear above the dark lightbox DIV, which can't be within the parent DIV because the overflow hidden will not make the dark lightbox DIV appear full browser screen.
Any help is appreciated.
If you read up on GPU Accelerated Compositing in Chrome http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome you'll find that a renderLayer will get it's own compositing layer when:
- Layer has 3D or perspective transform CSS properties
- Layer is used by video element using accelerated video decoding
- Layer is used by a canvas element with a 3D or 2D context
- Layer uses a CSS animation for its opacity or uses an animated webkit transform
- Layer has a descendant that has a compositing layer
- Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer)
You're getting different results when you add or remove the 3D transform because the code either goes through the GPU accelerated path, or the software rendering path. The GPU accelerated path is very sensitive to what GPU/drivers you have and if you see any sort of strange graphical glitches, one of the first things you should check is if they still exist when you turn off hardware acceleration off in chrome://flags/
All three examples work for me on Chrome OSX, so this is likely a browser bug with a specific graphics card. If you can find a base case I would suggest reporting this bug to the chromium project with your GPU info.
这篇关于复杂的Webkit Bug？相对位置+ Z索引+溢出隐藏+ CSS3变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
