Webkit complex bug? Relative Position + Z-Index + Overflow Hidden + CSS3 Transform

Question

The code ( JSFiddle Preview ) below gives unexpected results in Webkit compared 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 Result: It should have 3 DIVs (slides) continuously animated on the left in the loop, including reputable colored rectangles in the slides. If you click on a color field, a lightbox appears with the RBG color of the color box pressed within the respected slide. Click again to close the lightbox. That's all, while the 3D transformation is applied up to the light gray parent DIV, with the position relative to the overflow hidden, with jQuery animation on the absolute positioning slides of the DIV.

Webkit Results. Colored fields in the slides are not displayed at all for moving / rendering until you change the size of the browser window on the desktop or press the JSFiddle panel resize handle (or pinch / zone) on the tablet. In another debugging note, if the 3D transform animation is not cyclic, when the animation stops, the DIVs display as expected.

Test results showing Webkit error:

• Win7 IE10: Pass
• Win7 Chrome: Pass
• Win7 FF: Pass
• Win7 Safari: Fail
• Win8 IE11: Pass
• Android Chrome: Fail
• Safari iOS: crash
• iOS Chrome: Fail
• MacOS Safari: Fail
• MacOS Chrome: Fail

Notification ( JSFiddle Preview ) without 3D conversion, the code works, although the animation is not smooth on the desktop. Lightbox works great.

Please note ( JSFiddle Preview ) with 3D conversion after the parent DIV, the animation is smooth and the lightbox works fine.

Notification ( JSFiddle Preview ) with -webkit-transform: rotate (0deg) applied to the parent DIV with overflow, the animation is changeable on tablets, but 3D conversion can exist before the parent DIV or inside the DIV slide files. Another problem is being created. Parent DIV overflow has a lower z index than lightbox, which makes the dark DIV lightbox above the white DIV dialog that is inside the parent DIV.

I know this is a very strange example, but it is an irrigated example of more private complex code. 3D transformation must be before the parent div or inside the slide. The lightbox dialog should be inside the parent DIV or slide, but displayed above the dark lightbox DIV, which cannot be inside the parent DIV, because hidden overflow will not cause the dark lightbox DIV to appear in the full browser window.

Any help is appreciated.

Answer 1

If you read about accelerated GPU compilation in Chrome http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome , you will find that renderLayer will get its own compositing layer when:

• A layer has CSS or 3D perspective transform properties.
• A layer is used by a video element using accelerated video decoding
• A layer is used by a canvas element with a 3D or 2D context.
• Layer uses CSS animations for its opacity or uses an animated webkit transform
• The layer has a child with a layout layer.
• The layer has a brother with a lower z-index, which has a composition layer (in other words, the layer is displayed on top of the composite layer).

You get different results when adding or removing 3D transforms because the code goes through the GPU accelerated path or the software rendering path. GPU accelerated path is very sensitive to the fact that you have GPUs / drivers, and if you see any weird graphics crashes, one of the first things you should check if they still exist when you disable hardware acceleration in chrome : // flags /

All three examples work for me in Chrome OSX, so this is most likely a browser error with a specific graphics card. If you can find the base code, I would suggest reporting this error to the chromium project with your GPU information.

Answer 2

I think hardware acceleration can be a problem .. You can take a look at this question and the accepted answer ...

Chk this

try chrome://gpu and find the difference.