The viewport doesn't scale on old device (Redmi 4X, Android 7, Chrome)

Bugs
1

If you run the next example on Redmi 4X, Android 7, Chrome in full screen mode: Plunker - resize-viewport-on-old-adnroid-device-babylonjs-js you will see the next result:

image

But in preview it works without a problem:

image

I thought maybe it is a problem of Plunker but when I deployed the example on free https://www.netlify.com/ hosting I see the same problem: https://65c7918011889978078b13f4--enchanting-stroopwafel-db1c77.netlify.app/

image

2

Three.js has the same problem: The viewport doesn't scale on old device (Redmi 4X, Android 7, Chrome) · Issue #27723 · mrdoob/three.js · GitHub

But it is very interesting that I found an old example with Three.js v89 that works in the full screen mode on Redmi 4X without the problem above: Plunker - Armchair (Three.js, ES5) (it doesn’t work in preview but it is not important):

image

I deployed it to www.netlify.com and it works too: https://65c795e8637dc67ba4a4feeb--grand-rolypoly-c2a81e.netlify.app/

image

3

I have the same problem in pure WebGL too: javascript - Resizing WebGL canvas on old Android devices - Stack Overflow

5

Yes, I tried to set a custom width/height of canvas. It changes a viewport size. It looks like gl.viewport gets the initial size of canvas and cannot change it when the canvas is changed its size.

For example, see how a viewport changed when I set a canvas size to 200x200:

<canvas id="renderCanvas" width="200" height="200"></canvas>

image

6

I thought about it but as I showed above the old version of Three.js (v89) works without the problem.

7

I don’t know why but when I set antialias to false it works without the problem for pure WebGL, Three.js, and Babylon.js. My solution - do not use antialias:

Babylon.js:

const engine = new BABYLON.Engine(canvas, false);

image

WebGL:

const gl = canvas.getContext("webgl", { antialias: false });

Three.js:

const renderer = new THREE.WebGLRenderer({ antialias: false });
1 Like