Window resize on mobile leads to panic if setting height to window.inner_height

[riverfr0zen]

I have a browser canvas resizing system based on a discussion I found on the Discord. The basic idea is to size the window to whatever the browser window dimensions are. It looks like this:

fn handle_browser_resize(mut windows: ResMut<Windows>) {
    let window = windows.get_primary_mut().unwrap();
    let wasm_window = web_sys::window().unwrap();
    let (target_width, target_height) = (
        wasm_window.inner_width().unwrap().as_f64().unwrap() as f32,
        wasm_window.inner_height().unwrap().as_f64().unwrap() as f32,
    );

    if window.width() != target_width || window.height() != target_height {
        window.set_resolution(target_width, target_height);
    }
}

This works really well on desktop browsers. The app sizes the canvas to the window dimensions. But if I access the app on Android Chrome, I just get a blank page and the following error (well, many errors, but this seems most relevant):

panicked at 'wgpu error: Validation Error

Caused by:
    In Device::create_texture
      note: label = `sampled_color_attachment_texture`
    Dimension 4182 value 4182 exceeds the limit of 4096

', /home/irf/.cargo/registry/src/gh.neting.cc-1ecc6299db9ec823/wgpu-0.12.0/src/backend/direct.rs:2273:5

I found that if I reduce the target_height by 30.0, then the example works on mobile.

...
    if window.width() != target_width || window.height() != target_height {
        window.set_resolution(target_width, target_height - 30.0);
    }
...

But I don't know why. Is this a known thing with mobile, that you need to have a slightly smaller window height than the inner_height that is being reported by websys::window?

Is there something less ambiguous than a value of -30.0 (which obviously may only pertain to my device) that I can reduce the target_height by reliably to ensure the panic above doesn't happen?

[riverfr0zen]

This suggestion and some help on Discord has led me to a workaround. First I will try to explain my understanding of the issue, and then my workaround:

The scale factor of the device seems to be applied to the resolution values provided to window.set_resolution. For example, when I try to set resolution height to the wasm_window.inner_height() value above, it seems that height is multiplied by the scale_factor. On my mobile phone, the inner_height is 1349 and the scale_factor is 3. 1349 * 3 is 4182, which is the value that is exceeding the limit in the error:

Caused by:
    In Device::create_texture
      note: label = `sampled_color_attachment_texture`
    Dimension 4182 value 4182 exceeds the limit of 4096

I don't know this space (and Bevy) well enough yet to prevent window.set_resolution from applying the scale_factor beyond the limit (or why the limit is 4096, when the wasm_window in my code reports an inner_width that scales to 4182).

However, I am able to workaround the issue by checking the device limit and making sure what I send to set_resolution will not get scaled beyond the limit. It's not a perfect solution because it results in some empty space at the bottom of the screen (on my phone at least), since the height is adjusted to be less than the reported inner_width of the window. My updated resize system looks like this:

#[cfg(target_arch = "wasm32")]
fn handle_browser_resize(mut windows: ResMut<Windows>, mut app_globals: ResMut<AppGlobals>) {
    let window = windows.get_primary_mut().unwrap();
    let wasm_window = web_sys::window().unwrap();
    let (mut target_width, mut target_height) = (
        wasm_window.inner_width().unwrap().as_f64().unwrap() as f32,
        wasm_window.inner_height().unwrap().as_f64().unwrap() as f32,
    );

    if window.width() != target_width || window.height() != target_height {
        if window.scale_factor() >= 1.0 {
            let scale_factor = window.scale_factor() as f32;

            if target_width * scale_factor > app_globals.max_texture_dimension_2d as f32 {
                target_width = (app_globals.max_texture_dimension_2d as f32 / scale_factor).floor();
            }
            if target_height * scale_factor > app_globals.max_texture_dimension_2d as f32 {
                target_height = (app_globals.max_texture_dimension_2d as f32 / scale_factor).floor();
            }
            info!("corrected target_height: {}", target_height);
            window.set_resolution(target_width, target_height);
        } else {
            window.set_resolution(target_width, target_height);
        }
    }
}

EDIT: New location of full example code is here