Resizing WebGL canvas on old Android devices

[8Observer8]

The next code snippet works as expected on Android 13. It resizes WebGL canvas in Chrome Android browser without problems: https://plnkr.co/edit/H3Swhi3WweVmwgxa

But on Android 7 (Redmi 4X) it draws only the default size of canvas (300x150):

Is it possible to solve it? I set a view port like this:

            window.onresize = () => {
                const dpr = window.devicePixelRatio;
                gl.canvas.width = Math.round(gl.canvas.clientWidth * dpr);
                gl.canvas.height = Math.round(gl.canvas.clientHeight * dpr);
                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
                draw();
            };

Cross-refs:

• https://community.khronos.org/t/resizing-webgl-canvas-on-old-android-devices/110474
• https://stackoverflow.com/questions/77873424/resizing-webgl-canvas-on-old-android-devices

[8Observer8]

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:

WebGL:

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

Three.js

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

Babylon.js:

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

• Three.js topic: https://github.com/mrdoob/three.js/issues/27723
• Babylon.js topic: https://forum.babylonjs.com/t/the-viewport-doesnt-scale-on-old-device-redmi-4x-android-7-chrome/47952