Three.js: Rendering Three.js examples on Sony Xperia Z4 Android Tablet in Chrome

[ChronoAndross]

Hey Three.js team,
I found this weird bug that I thought you might find interesting.

When I attempt the cloth animation three.js example (https://threejs.org/examples/#webgl_animation_cloth) on this tablet in Chrome, it only shows a small part of the rendered canvas.

(What it looks like on device)

(What it looks like normally)

I debugged this a little bit. When setSize is usually called, it edits a _canvas variable, which usually adjusts the screen immediately after being set. However, in Chrome on this device this does not happen. To make a weird case even weirder, this example actually works on mobile Firefox on the same device.

Is this something that can be fixed from inside three.js, or is this something to developers of WebGL have to address?

Thanks so much!

Three.js version

• [ ] Dev
• [x] r85
• [ ] ...

Browser

• [ ] All of them
• [x] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [x] Android 7
• [ ] iOS

Hardware requirements for the device are right here: https://www.cnet.com/products/sony-xperia-z4-tablet-sgp771-tablet-android-6-0-marshmallow-32-gb-10-1-3g-4g/specs/ (however, I tested this on Android 7, not 6)

[mrdoob]

What version of Chrome and Android? Is that the only example that displays incorrectly?

[ChronoAndross]

@mrdoob I am using 58.0.3029.83 (latest version I think) and Android 7. If you look at several of the other examples on the three.js examples portal, many of these examples will yield similar results (only showing a smidget of the rendered canvas). This one: https://threejs.org/examples/#webgl_animation_keyframes_json, for example, yields a similar result.

Let me know if you need me to do any additional testing on my side.

[mrdoob]

@kenrussell sounds familiar?

[kenrussell]

There have been a couple of similar reports from people on certain Android devices over the past week. We'll start investigating this actively under http://crbug.com/724398 . CC @kainino0x.

[tgrajewski]

Had the same issue, it's something related to anti-aliasing, disabling it fixed rendering for me.

[kainino0x]

Yes, it affects only antialiased WebGL contexts. The bug for it is http://crbug.com/696126 and it'll be worked around in Chrome 59 (releasing about a week)

[Mugen87]

This should be fixed now.

[maurocolella]

It appears that a similar bug still affects current version of Chrome on iOS (75.0.3770.103, on iOS 12.3.1, iPhone XS).

I have tested my solution on a variety of platforms, including Chrome on Android (Samsung Galaxy Tab S2), and it works without any problems, but on iOS, when changing device orientation from portrait to landscape, my renderer stays at the portrait size.

The renderer is initialized as:

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

Resized as:

function onResize() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height);
    controls.update();

    chromaticAberrationPass.uniforms['resolution'].value = new THREE.Vector2(
      width * window.devicePixelRatio,
      height * window.devicePixelRatio
    );
    composer.reset();
  }

The canvas is sized as:

      canvas {
        display: block;
        height: 100vh;
        width: 100vw;
      }

[kainino0x]

FYI, Chrome on iOS is just a wrapper around WebKit - it should have exactly the same behavior as Mobile Safari.

I don't suspect it's a related issue; you should probably file a new bug.