PDA

View Full Version : black screen issue on Google Chrome since v27



anewgene
4 Jun 2013, 9:38 AM
We started to experience black screen issue recently when Google Chrome upgraded to v27 (27.0.1453.93). I have now isolated the problem in this test3.html file:

http://dl.dropboxusercontent.com/u/25234240/test3.html

The behaviors I noticed are listed below:

* Complete black screen for the entire tab
* No issue on Chrome version 26 and earlier, or any other browsers.
* Same issue with "--disable-extensions" flag or in Incognito mode.
* Same issue on Mac OSX and Linux (Ubuntu 13.04), Version 27.0.1453.93) and Windows 7(Verison 27.0.1453.94 m) . Also the same for their beta (v28) and dev (v29) channel.

* Uncheck “Use hardware acceleration when available” from settings solves the issue. (Testing on older laptop or VM has no such issue, probably due to no hardware acceleration anyway)

* Black screen issue seems related to canvas rendering and z-index
** iframe in Window widget must renders a canvas, like this one:
http://corehtml5canvas.com/code-live/ch01/example-1.1/example.html
** must have a hidden "container" div with high z-index.
** "inner" div must not empty.
** Window widget has a Ext.WindowGroup manager, in order to lower the z-index of Window widget.


I have to adjust z-index here as I need to toggle container to be on top of Window widget when it's visible.

Is this purely a Chrome bug? Any suggestion to get this around for the moment?

Thanks a lot.

mitchellsimoens
6 Jun 2013, 5:55 AM
What is the test case doing? Please post code in the thread to make it easy for people to help you.

rich02818
6 Jun 2013, 8:50 AM
run OP's example at http://dl.dropboxusercontent.com/u/25234240/test3.html
(http://dl.dropboxusercontent.com/u/25234240/test3.html)
see black screen. view source and get this:




<html>
<head>

<link href="http://cdn.sencha.com/ext/gpl/3.4.1.1/resources/css/ext-all.css" rel="stylesheet" />
<script src="http://cdn.sencha.com/ext/gpl/3.4.1.1/adapter/ext/ext-base-debug.js"></script>
<script src="http://cdn.sencha.com/ext/gpl/3.4.1.1/ext-all-debug.js"></script>

<style>
#container {
z-index:8999; /* Just below Ext.WindowMgr's 9000 seed */
position:absolute;
width:100%;
height:100%;
background-color:#6495ed;
}

.inner {
position: relative;
}

</style>

</head>


<body>

<div id="container">
<div class="inner"><br /></div>
</div>

<script>
var wingroup = Ext.WindowGroup();
wingroup.zseed = 1000;

Ext.onReady(function(){

var win = new Ext.Window({
manager: wingroup,
width: 520,
height: 390,
layout:'fit',
items: [{
xtype: 'panel',
bodyCfg : {
tag: 'iframe',
src: 'http://corehtml5canvas.com/code-live/ch01/example-1.1/example.html'
}
}]
});


Ext.get('container').hide();
win.show();

});

</script>


</body>
</html>

anewgene
19 Jun 2013, 4:29 PM
Thanks.

Looks like this is a Google Chrome bug, and it has been fixed in dev channel (since 29.0.1535.3 (http://googlechromereleases.blogspot.com/2013/06/dev-channel-update_11.html)) and beta channel (since 28.0.1500.45 (http://googlechromereleases.blogspot.com/2013/06/beta-channel-update_12.html)), but not in stable channel yet (27.0.1453.116 as of today). Not exactly sure which bug fix actually solves the problem though.