Thank you for reporting this bug. We will make it our priority to review this report.
-
Ext JS Premium Member
[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:
- Download the attached zip (webgl.zip) and extract the WebGL files.
- Uncomment requestAnimFrame(tick); in webgl-demo.js.
- 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>
- 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();
});
- 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.
-
Ext JS Premium Member
This issue appears to be resolved with ExtJS 4.0.2 RC3 in Chrome 12.0.742.91. Thank you.