Rendering bug in Chrome Android? (ok in Chrome Desktop and Firefox Android)

Questions
21

The numbers are small for me:

console.log(gl.drawingBufferWidth, gl.drawingBufferHeight);
300 150
22

Please try looking the documentation on the values first… I have provided a lot of information on what’s happening but I expect effort on your part in understanding the problem in return.

1 Like
23

The docs (including Khronos) don’t say much, but the numbers I see appear to be wrong; they should be the same size as the canvas width/height unless the browser is “unable to satisfy the requested width or height” for reasons unspecified.

(I still don’t understand the problem.)

Looks like an effect due to whatever issue Chrome Android has. Maybe it is time for crbug, because I think these numbers provide a hint.

24

I ran into the same problem. I triple-checked all my math, but I couldn’t find any issue. Thankfully, I found this thread and got a tip on devicePixelRate. Experimentally, I found out that the problem appears if the buffer exceeds 4096 on either side. Using the following code, I was able to get the correct result for my project. It’s not a perfect solution, but it works :slight_smile:

let dpr = window.devicePixelRatio;
const MAX_ANDROID_BUFFER_DIM = 4096;
if ((window.innerWidth * dpr > MAX_ANDROID_BUFFER_DIM || window.innerHeight * dpr > MAX_ANDROID_BUFFER_DIM)
 && (navigator.userAgent.includes('Android') && navigator.userAgent.includes('Chrome'))
) {
    dpr = Math.floor(
        Math.min(
            dpr - 1,
            MAX_ANDROID_BUFFER_DIM / window.innerHeight,
            MAX_ANDROID_BUFFER_DIM / window.innerWidth,
        ),
    );
}
this.renderer.setPixelRatio(dpr);

I believe there is no error in Three.js, but the an error inside of the Chrome Mobile. Because it should provide the correct dimensions for MAX_VIEWPORT_DIMS parameter (in my case it was 16384x16384). Or at least provide some warning/error about too large buffer size.

25

@erickskrauch that’s an interesting solution.

I forgot to circle back and post that I did open a Chrome bug:

https://issues.chromium.org/issues/40234130

(Hasn’t been fixed yet)

It’s been a while since I dealt with this, but a workaround I found at the time was to make sure to include a meta tag that causes the page not to render in desktop mode:

<meta name="viewport" content="width=device-width, initial-scale=1" />