REQUIRED INFORMATION


Ext version tested:
  • Ext 4.0.2 rev a

Browser versions tested against:
  • Chrome 12.0.742.100
  • Firefox 5.0
  • Internet Explorer 9.0.8112.16421
  • Safari 5.0.5 (7533.21.1)
  • Opera 11.11 (Build 2109)

Description:
  • In Chrome, a window touching a window with a WebGL canvas will leave artifacts when resizing slowly.
  • This occurs when resizing smaller until crossing ~500px wide and/or 225px high.
  • This does not occur when not touch the WebGL window, resizing larger, resizing fast, or resizing within the 500 x 255px bounds.

Steps to reproduce the problem:
  • Use Chrome. This issue does not occur in FireFox. Other Windows browsers do not support WebGL.
  • Create a window with a WebGL canvas.
  • Create another plain window with width 600, height 300.
  • Place the plain window on top of the WebGL window.
  • Resize the east handle very slow to the west. Observe the artifacting during this phase.
  • Stop resizing around 550px wide. Observe the artifact which remains.
  • Resize the window very slowly to the west again, this time past the 500px mark. Observe how the artifacting during dragging goes away.
  • Stop resizing around 450px wide. Observe the lack of artifacts.

The result that was expected:
  • Resizing any window in any browser should not cause artifacts during or after the drag.

The result that occurs instead:
  • Resizing windows under certain conditions creates and leaves artifacts.

Test Case:
Download the attached WebGL files (webgl.zip). Apply the following WebGL setup to your HTML head:
Code:
<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>
Code:
	var canvas = Ext.create('Ext.panel.Panel', {
		id: 'webgl-canvas',
		autoEl: {
			tag: 'canvas'
		},
		width: 'auto',
		height: 'auto'
	});

	Ext.create('Ext.window.Window', {
		title: 'WebGL Window',
		renderTo: Ext.getBody().createChild(),
		items: [canvas],
		x: 0,
		y: 0
	}).show();

	Ext.create('Ext.window.Window', {
		title: 'Plain Window',
		width: 600,
		height: 512, //513+ causes artifacting within the 500 width marker
		minWidth: 0,
		renderTo: Ext.getBody().createChild(),
		x: 50,
		y: 50,
		items: [
			Ext.create('Ext.panel.Panel', {
				items: [
					Ext.create('Ext.panel.Panel', {
						width: 500,
						height: 225
					})
				]
			})
		],
		layout: 'fit'
	}).show();

	webGLStart();


HELPFUL INFORMATION


Screenshot or Video:
See this URL for live test case: http://


Debugging already done:
  • Clicking on the WebGL window removes the artifacts from the resized window.

Possible fix:
  • Nudge the resized windows dimensions after the resize completes.
  • The nudge must set width less than 500px to remove artifacts, thus width 1 is a safe value.
  • A mask must be applied and destroyed during the process to limit flickering to the resized window.
  • Events cannot be suppressed as that prevents removal of the artifacts.
Code:
Ext.override(Ext.resizer.Resizer, {
    onResizeEnd: function(tracker, e) {
        var me = this,
            b = me.target.getBox();
        me.forceHandlesHeight();

		if (Ext.isChrome) {
			var t = me.target;
			Ext.defer(function() {
				var mask = Ext.create('Ext.Component', {
					x: b.x,
					y: b.y,
					width: b.width,
					height: b.height,
					renderTo: Ext.getBody().createChild(),
					style: {
						backgroundColor: t.el.getStyle('background-color')
					},
					floating: true
				}).show();
				t.setWidth(1);
				Ext.defer(function() {
					t.setWidth(b.width);
					mask.destroy();
				}, 1, this);
			}, 1, this);
		}

        return me.fireEvent('resize', me, b.width, b.height, e);
    }
});
Additional CSS used:
  • only default ext-all.css

Operating System:
  • Windows 7 Professional SP1 x64