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:


But in preview it works without a problem:


I thought maybe it is a problem of Plunker but when I deployed the example on free hosting I see the same problem:


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):


I deployed it to and it works too:


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>


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:


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



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


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