Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2011
    Posts
    33
    Vote Rating
    3
    wsi2 is on a distinguished road

      0  

    Post [4.0.1] Continuous flickering when dragging WebGL window in Chrome

    [4.0.1] Continuous flickering when dragging WebGL window in Chrome


    Bug
    When dragging a window with an animated WebGL canvas, all windows flicker for the duration of the drag in Chrome.

    Environment
    OS: Windows 7 Professional SP1 x64
    ExtJS: 4.0.1
    Browsers:
    • Google Chrome 11.0.696.71
    • Firefox 4.0.1
    • Internet Explorer 9.0.8112.16421 (WebGL not supported)
    • Safari 5.0.5 (7533.21.1) (WebGL not supported on PC version)
    • Opera 11.11 (Build 2109) (WebGL not supported)

    Steps to reproduce:
    1. Download the attached zip (webgl.zip) and extract the WebGL files.
    2. Uncomment requestAnimFrame(tick); in webgl-demo.js.
    3. Include the following WebGL setup code in the HTML HEAD.
      Code:
      <script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
      <script type="text/javascript" src="webgl-utils.js"></script>
      <script type="text/javascript" src="webgl-demo.js"></script>
      
      <script id="shader-fs" type="x-shader/x-fragment">
      	#ifdef GL_ES
      	precision highp float;
      	#endif
      
      	varying vec4 vColor;
      
      	void main(void) {
      		gl_FragColor = vColor;
      	}
      </script>
      
      <script id="shader-vs" type="x-shader/x-vertex">
      	attribute vec3 aVertexPosition;
      	attribute vec4 aVertexColor;
      
      	uniform mat4 uMVMatrix;
      	uniform mat4 uPMatrix;
      
      	varying vec4 vColor;
      
      	void main(void) {
      		gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
      		vColor = aVertexColor;
      	}
      </script>
    4. Run the code below in Chrome.
      Code:
      Ext.onReady(function(){
      	var canvas = Ext.create('Ext.panel.Panel', {
      		id: "webgl-canvas",
      		autoEl: {
      			tag: 'canvas'
      		}
      	});
      	var win2 = Ext.create('Ext.window.Window', {
      		title: 'window w/o canvas',
      		width: 300,
      		height: 300,
      		renderTo: Ext.getBody().createChild(),
      		x: 0,
      		y: 0,
      		items: [
      			Ext.create('Ext.panel.Panel', {
      				html: 'a panel'
      			})
      		],
      		layout: 'fit'
      	});
      	win2.show();
      
      	var win = Ext.create('Ext.window.Window', {
      		title: 'window with canvas',
      		width: 300,
      		height: 300,
      		renderTo: Ext.getBody().createChild(),
      		items: [canvas],
      		x: 50,
      		y: 50,
      		layout: 'fit'
      	});
      	win.show();
      
      	webGLStart();
      });
    5. In Chrome, drag the window with the WebGL canvas. Note how all windows flicker repeatedly during the drag.

    Workaround:
    In Chrome, force canvas elements in windows to hide at the start of dragging, and show at the end.
    Code:
    Ext.override(Ext.util.ComponentDragger, {
    	onStart: function() {
    		if (Ext.isChrome && this.comp.items) {
    			this.comp.items.each(function(item) {
    				if (item.el.dom.nodeName == 'CANVAS') {
    					item.hide();
    				}
    			}, this);
    		}
    
    		this.callOverridden();
    	},
    
    	onEnd: function() {
    		if (Ext.isChrome && this.comp.items) {
    			this.comp.items.each(function(item) {
    				if (item.el.dom.nodeName == 'CANVAS') {
    					item.show();
    				}
    			}, this);
    		}
    
    		this.callOverridden();
    	}
    });
    Notes:
    • The window drags as expected in Firefox without the workaround.
    • The issue does not occur in Chrome if the WebGL canvas is not animated. (Comment requestAnimFrame(tick); in webgl-demo.js.)
    • The issue does not occur if the dragged WebGL canvas is not contained in a window.

  2. #2
    Ext JS Premium Member
    Join Date
    Feb 2011
    Posts
    33
    Vote Rating
    3
    wsi2 is on a distinguished road

      0  

    Default


    This issue appears to be resolved with ExtJS 4.0.2 RC3 in Chrome 12.0.742.91. Thank you.