Dimension X value 4480 exceeds the limit of 4096

[miketwenty1]

Using bevyengine/bevy to make a WASM game, and I've had this issue for a long time. Unsure if there's a work around for my error.

Description
When using certain devices specifically a Pixel 6 Pro, I'll get an error in the web console log:

ERROR  Handling wgpu errors as fatal by default log.target = "wgpu::backend::direct";log.module_path = "wgpu::backend::direct";log.file = "/..../.cargo/registry/src/index.crates.io-6f17d22bba15001f/wgpu-0.18.0/src/backend/direct.rs";log.line = 3110;
wonder13.js:599 panicked at /..../.cargo/registry/src/index.crates.io-6f17d22bba15001f/wgpu-0.18.0/src/backend/direct.rs:3111:5:
wgpu error: Validation Error

Caused by:
    In Device::create_texture
      note: label = `main_texture_a`
    Dimension X value 4480 exceeds the limit of 4096



Stack:

Error
    at imports.wbg.__wbg_new_abda76e883ba8a5f (https://bg/client/out/bg.js:583:21)
    at bg.wasm:wasm-function[6856]:0x5874ea
    at bg.wasm:wasm-function[16892]:0x67c771
    at bg.wasm:wasm-function[29521]:0x6e292f
    at bg.wasm:wasm-function[5223]:0x53aec8
    at bg.wasm:wasm-function[537]:0x161938
    at bg.wasm:wasm-function[5583]:0x54e33b
    at bg.wasm:wasm-function[16822]:0x67b80f
    at bg.wasm:wasm-function[1025]:0x2ccb76
    at bg.wasm:wasm-function[587]:0x1b1812

Pixel 6 pro reporting back in browser these dimensions:
screen.width = 412
screen.height = 746
The device pixel ratio = 3.5
window.innerHeight = 1492
window.innerWidth = 412

Platform
Information about your OS, version of wgpu, your tech stack, etc.
INFO /..../.cargo/git/checkouts/bevy-f7ffde730c324c74/101037d/crates/bevy_render/src/renderer/mod.rs:144 AdapterInfo { name: "ANGLE (ARM, Mali-G78, OpenGL ES 3.2)", vendor: 5045, device: 0, device_type: IntegratedGpu, driver: "", driver_info: "", backend: Gl }

Is this a bug, is there a workaround when loading my WASM file to not get this error?

[cwfitzgerald]

I suspect you're hitting the same thing I've been hitting for a bit.

Make sure you have <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the header of your html, to make the website behave like a mobile site.

This will fix regular viewing on android, but will not fix "desktop site" mode on phones. See https://bugs.chromium.org/p/chromium/issues/detail?id=1517022&q=&can=8

[miketwenty1]

I tried <meta name="viewport" content="width=device-width, initial-scale=1.0"> as I saw another person with the same issues doing this, but it doesn't fix the issue for the pixel 6 pro. Or maybe something is happening that is overriding it? I'm unsure how to proceed.

Note: I also have tried: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

[cwfitzgerald]

Maybe add the same but for height? https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

[miketwenty1]

tried adding height=device-height it didn't do anything different.

[cwfitzgerald]

Hmm, is the canvas somehow ending up vastly oversized in the height dimension when laid out by CSS?

[miketwenty1]

Unsure, i think it's a bevy issue. Closing for now and I'll track here bevyengine/bevy#7038