1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    2
    Vote Rating
    0
    anewgene is on a distinguished road

      0  

    Default black screen issue on Google Chrome since v27

    black screen issue on Google Chrome since v27


    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...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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,652
    Vote Rating
    901
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What is the test case doing? Please post code in the thread to make it easy for people to help you.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    381
    Vote Rating
    41
    rich02818 is an unknown quantity at this point

      0  

    Default


    run OP's example at http://dl.dropboxusercontent.com/u/25234240/test3.html

    see black screen. view source and get this:

    Code:
                                                                                                    
    <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>

  4. #4
    Sencha User
    Join Date
    Jun 2013
    Posts
    2
    Vote Rating
    0
    anewgene is on a distinguished road

      0  

    Default


    Thanks.

    Looks like this is a Google Chrome bug, and it has been fixed in dev channel (since 29.0.1535.3) and beta channel (since 28.0.1500.45), but not in stable channel yet (27.0.1453.116 as of today). Not exactly sure which bug fix actually solves the problem though.