[cssom-view] visual viewport sometimes reportedly cannot fully scale out to layout viewport

[lpd-au]

I have an older site with a viewport meta tag like this: <meta name="viewport" content="width=1024">.

When fully pinch-zoomed out on a mobile device (and upon first loading), I would expect the visual viewport to be at minimum 1024 CSS pixels wide, matching the layout viewport. However, depending on the mobile device, that isn't always the case.

Here's my simplified test case: https://output.jsbin.com/xesolop
And here's the widths reported by the Visual Viewport API:

PIXEL 6 PRO

Firefox:
- Portrait:  1024
- Landscape: 1024

Chrome
- Portrait:  1024
- Landscape: 1023.9999389648438

PIXEL 7

Firefox
- Portrait:  1024
- Landscape: 1023.9833374023438

Chrome
- Portrait:  1023.9998779296875
- Landscape: 1024

GALAXY S23

Firefox:
- Portrait:  1024
- Landscape: 1024

Chrome
- Portrait:  1024
- Landscape: 1024

Is reporting 1023.9 (when fully pinch-zoomed out) expected/allowed behaviour? From my point of view, it's undesirable behaviour since it complicates detecting when the user has either pinch-zoomed in or refreshed the page whilst zoomed (visualViewport.width < 1024).

Thanks!

[bokand]

This happens due to the UI scaling factor (i.e. the screen density) of the device. I believe the layout is sized to the nearest physical pixel which doesn't fall on a whole CSS pixel. We could do some rounding/ceil/min but that would likely cause other issues. Do you see consistent values from documentElement.getBoundingClientRects?

[lpd-au]

Do you see consistent values from documentElement.getBoundingClientRects?

I saw nothing other than exactly 1024 from document.querySelector(':root').getBoundingClientRect().width.

[lpd-au]

Just to elaborate on my answer yesterday, for completeness I retried with document.documentElement.getBoundingClientRect() and consistently got this:

{
    "x": 0,
    "y": 0,
    "width": 1024,
    "height": 351.8258972167969, // varied
    "top": 0,
    "right": 1024,
    "bottom": 351.8258972167969, // varied
    "left": 0
}

Does that still suggest the same cause to you? Given they're both doubles, I believe it's a reasonable expectation that the width and right values should match the viewport width in this scenario, wdyt?

Some alternatives to rounding the width that may be easier to implement:

• Adding a second scale value to the Visual Viewport API where 1 is the size of the layout viewport, rather than the optimal device-width/height. (Assuming it would report 1.0 when fully pinch-zoomed out rather than 0.999...)
• Adding offsetRight and offsetBottom values to the Visual Viewport API. (Assuming they would report 0 when fully pinch-zoomed out rather than 0.001...)
• Implementing Use visual viewport instead of layout viewport for root intersection rectangle? IntersectionObserver#95. (Assuming the intersection for a 100dvw x 100dvh element is measured as 1.0 when fully pinch-zoomed out.)