[4.0.1] Continuous flickering when dragging WebGL window in Chrome

[wsi2]

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.
   

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

   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.

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.

[wsi2]

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