Web: Canvas dimensions not correct initially.

[bspot]

On the web, winit accounts for devicePixelRatio by setting both the canvas' width/height and applying CSS rules width: ... / height: ....

However, the CSS rules are not applied initially, so the canvas is sized incorrectly.

After

• changing the devicePixelRation by zooming in or out, or
• changing the window size
  the CSS rules are then applied.

I believe the CSS rules should also be applied directly after the canvas is created.

[jroddev]

I came across this issue today with bevy/wgpu and it's causing the application to crash.
Running in Chromium based browsers (Vanadium, Brave) on a Pixel 7 with a devicePixelRatio of 2.62 the canvas exceeds the maximum texture limit in wgpu.

• Chromium on Desktop Linux is fine.
• Firefox on the same Android device also works.

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

The container is 980 x 1529 and the canvas is 2572 x 4015 (2.62 times the size it should be). The style width/height is correct.

If I pad out other components to bring the canvas size under the limit then everything works.

Bevy has a scale factor override but it doesn't look to be used by winit

pub fn scale_factor() -> f64 {
  let window = web_sys::window().expect("Failed to obtain window");
  window.device_pixel_ratio()
}

Can this be overridden?

[daxpedda]

I'm not 100% sure but I believe this was actually related to #2778. The initial canvas dimensions supplied by Winit were set though, they were just weird because of the relationship described in #2778.

In any case, it's definitely fixed in #2849.
See also gfx-rs/wgpu#3690.