Chrome Android rendering is incorrect

Describe the bug

Objects are rendered stretched and distorted on Chrome (and Chrome-based browsers) on Android.

To Reproduce

Steps to reproduce the behavior:

1. Visit https://cdpn.io/pen/debug/NWYXdoO/d4a556bd02a253cf510b971dfee4772f
2. Notice on Chrome Desktop (102.0.5005.115 at time of writing) it looks fine:
   
3. Notice it is fine in Firefox Android (102.2.1 at time of writing):
4. Notice on Android it is incorrect in Chrome (103.0.5060.129 at time of writing), Edge, Opera, and Samsung Internet, presumably because they all are based on Chrome’s engine, all of them looking like the following:

Code

<script src="//unpkg.com/three@0.143.0"></script>

<style>
	html,
	body {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	canvas {
		box-sizing: border-box;
		border: 5px solid deeppink;
	}
</style>

<script>
	const renderer = new THREE.WebGLRenderer();
	const canvas = renderer.domElement;
	const sceneW = 980;
	const sceneH = 1851;
	const sceneAspect = sceneW / sceneH;
	let windowAspect = innerWidth / innerHeight;
	renderer.setSize(sceneW, sceneH);


	var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
	camera.position.set(0,0,10);
	var scene = new THREE.Scene();
	var mesh=new THREE.Mesh(new THREE.BoxGeometry(1,1,1),new THREE.MeshNormalMaterial());
	scene.add(mesh);
	mesh.rotation.set(10/180 * Math.PI, 10/180 * Math.PI, 10/180 * Math.PI)


	function resize() {
		let windowAspect = innerWidth / innerHeight;

		if (windowAspect >= sceneAspect) {
			canvas.width = (window.innerHeight * sceneAspect) ;
			canvas.height = window.innerHeight ;
		} else {
			canvas.width = window.innerWidth ;
			canvas.height = (window.innerWidth / sceneAspect) ;
		}

		var width=canvas.width;
		var height=canvas.height;

		camera.aspect = width / height;
		camera.updateProjectionMatrix();
		renderer.setSize( width, height );
		
		render()
	}


	window.addEventListener('resize', resize);
	renderer.setPixelRatio(window.devicePixelRatio);
	document.body.append(canvas);
	
	function render() {
		renderer.render( scene, camera );
	}
	
	resize();
</script>

Live example

Codepen pen: https://codepen.io/trusktr/pen/NWYXdoO/d4a556bd02a253cf510b971dfee4772f?editors=1000

Debug view: https://cdpn.io/pen/debug/NWYXdoO/d4a556bd02a253cf510b971dfee4772f

Expected behavior

The cube drawing should not be stretched and offset, it should be centered in the view.

Screenshots

See above.

Platform:

• Device: Pixel 6 Pro
• OS: Android
• Browser: Android Chrome, Edge, Opera, and Samsung Internet
• Three.js version: 143

[donmccurdy]

Feel free to study the problem, but we are asking you to use another place for the investigation and discussion.

[donmccurdy]

I think @Mugen87 is making an educated guess that this is very unlikely to be a bug in the three.js library, and I agree. Under those circumstances, please use other venues for discussion.