[ResizeObserver] with device pixel content box does not take into account visualViewport.scale

[greggman]

• https://drafts.csswg.org/resize-observer/#dom-resizeobserver-observe
• https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/scale

ResizeObserver is supposed to return devicePixelContentBox which is the number of device pixels of an observed element's content box. But, if you pinch to zoom (Chrome Mac, 2 finger or AFAIK any Android phone), the number of device pixels changes but ResizeObserver's event is not fired nor does the actual reported size of devicePixelContentBox change if you refresh a pinch to zoom page.

This means you can't actually get the correct device pixels. You can multiply by scale but you end up with the same problem devicePixelContentBox was designed to solve.

Can this be fixed?

[greggman]

You want device pixels so you can be pixel perfect. The user pinches to zoom (testing on M1 Mac). ResizeObserver does not actually return device pixels even though it's named devicePixelContentBox. Multiplying that value by visualViewport.scale doesn't solve the problem.

Here's a repo of the issue: https://greggman.github.io/doodles/test/devicepixelcontentbox-with-visualviewport-scale/dpr-zoom-test-with-visualviewport.html

If the calculation is perfect then you should see solid stripes, orange and cyan. If the calculation is not perfect then you'll see a gradient of color (orange to dark orange), cyan to dark cyan). If you turn on image-rendering: pixelated then you'll see some line is doubled because the calculation is not perfect.

Here's a video: Unfortunately, compression artifacts might not make it clear things are not correct (it also changed the colors to pink and blue 🤷‍♂️). But, you can run the test yourself. Open the test above on a Mac. See, by default, the colors are solid. Pinch to zoom on the trackpad. See the colors stop being solid (because devicePixelContentBox * visualViewport.scale does not return the actual number of device pixels so the page can't correctly render a perfect match for the device). It's best to pinch to zoom with the cursor over the info box, otherwise it will get pushed offscreen.

Screen.Recording.2025-01-09.at.12.50.39.mov

Note that in the video, switching to ceil or round looks better but if you look closely you'll see the color on the right is not the same as the color on the left. This is more easy to see if you do it live.

In any case, given the value is called devicePixelContentBox it seems like it should actually return "device pixels" and not some other value. Can we update to spec to say it should take visualViewport.scale into account and do whatever is necessary to return the actual "device pixels"? Or add a new actualDevicePixelContentBox and deprecate the existing one?