EDIT: posted in GitHub tracker: Chrome Android rendering is incorrect · Issue #24412 · mrdoob/three.js · GitHub
There’s something going on either in Three.js (seems unlikely in this case, but still a possibility), or with discrepancies between browsers (seems more likely).
Here is a simple Three.js scene: https://codepen.io/trusktr/pen/NWYXdoO/d4a556bd02a253cf510b971dfee4772f
Here is the “debug view” (full page without codepen UI): CodePen - Chrome Android bug with Three.js? v2
In Chrome desktop, the debug view will look like this:
Open Chrome devtools, turn on the device emulator, set the “Dimensions” to “Responsive”, set the values to
1851, and you will see this:
Now, open it in Firefox on Android, or Safari on iOS, and it works as expected in both, without any distortion:
Finally, open it in any Chrome/Blink-based browser including Chrome Android, Edge Android, Opera Android, and Samsung Internet Android, and it will be broken presumably because they all use the same browser engine. The position of the object will be off, and the object will be stretched (as if it were scaled on Y or similar). Here are those four browsers on Android, respectively:
Any ideas what the issue could be? Perhaps it is a bug in Chrome’s WebGL API.
I am able to reproduce the problem only on Chrome-based Android browsers so far.