Results 1 to 4 of 4

Thread: black screen issue on Google Chrome since v27

  1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    2
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    411
    Vote Rating
    76
      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
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •