PDA

View Full Version : [4.0.1] Continuous flickering when dragging WebGL window in Chrome



wsi2
27 May 2011, 3:12 PM
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:

Download the attached zip (26314) and extract the WebGL files.
Uncomment requestAnimFrame(tick); in webgl-demo.js.
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>


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();
});

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
8 Jun 2011, 12:23 PM
This issue appears to be resolved with ExtJS 4.0.2 RC3 in Chrome 12.0.742.91. Thank you.