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

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

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

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

Since the issue seems to be cross engine perhaps it’s an HTML/JS issue.
Have you tried giving the Canvas tag width and height properties?

<canvas width="400px" height="300px" />

Perhaps older browser did not calculate the width and height by themselves.
Worth checking it out just to be sure it is not the cause of the issue.

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

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

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