Issue metadata
Sign in to add a comment
|
WebGL viewport is broken on mobile
Reported by
r...@roelkok.net,
Apr 30 2017
|
||||||||||||||||||||||
Issue description
Steps to reproduce the problem:
1. Get a WebGLRenderingContext (gl = canvas.getContext('webgl');)
2. Set a clear color (gl.clearColor(1.0, 0.0, 0.0, 1.0);)
3. Change the width/height of the canvas (gl.canvas.width = 310;)
4. Call the clear method (gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);)
What is the expected behavior?
It should clear the entire canvas area.
What went wrong?
In Chrome mobile only an area of 300 by 150 pixels in the bottom left area is drawn (cleared);
Did this work before? Yes Unknown but April 23rd it still worked (based on the commit log of a webgl project I'm working on)
Does this work in other browsers? Yes
Chrome version: 58.0.3029.83 Channel: stable
OS Version: 7.0
Flash Version:
Demo: http://jsbin.com/gividehowe/edit?html,js,output
The viewport of WebGL seems to be stuck on 300x150px (the default canvas size). Using gl.viewport(x, y, width, height) doesn't solve this issue.
This works in: Chrome desktop, Edge, Safari mobile and even on the same device in Firefox. The device tested is a Sony Xperia Z5 Premium, which has an Adreno 430 gpu.
,
May 1 2017
Ok found out that this does not occur when { antialias: false } is passed as context attributes (ie gl.getContext('webgl', { antialias: false });). Not passing it or setting it to true causes the bug to appear.
,
May 1 2017
Suspecting this is related to issue 696126 , because it requires {antialias: true} and is on Xperia Z5.
,
May 1 2017
,
May 1 2017
Pretty confident now that this is caused by issue 696126 , merging. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by r...@roelkok.net
, May 1 2017Attached is a screenshot where you can see webgl only renders to a 300x150 area. Code var gl = canvas.getContext('webgl'); gl.clearColor(1.0, 0.0, 0.0, 1.0); // red gl.canvas.width = 310; gl.canvas.height = 160; gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); The canvas has a css background color of lime green. Only in Chrome on the Z5 Premium the green is still visible. Tested scenarios: Windows desktop: - Chrome: ☑ - Edge: ☑ - Firefox: ☑ iOS: - Chrome: ☑ - Safari: ☑ Motorola G (3rd Gen) Android 6 - Chrome 58: ☑ Xperia Z5 Premium: - Firefox: ☑ - Chrome 58: ❌ fail So it seems the combination of the Z5 and Chrome. This worked before.223 KB
223 KB View Download