Problem description

A dashed border is drawn around the centre box when the page loads, and is re-positioned by an event handler when the viewport is resized.

Try toggling your OS's "show scroll bars" setting and showing/hiding the DevTools. Depending on OS, toggle setting and DevTools' position, the following can happen—but when the viewport is subsequently resized, they start working as expected again:

Further: code running in an extension's content script always receives the incorrect values at first, but does also get correct values after a viewport resize (if you have the Landmarks extension you can check this on a similar page with added landmarks).

These problems occur in Firefox 85, Chrome 88, Edge 88 (though only the extensions part seems to be a problem when Flexbox is used) and Safari 14, on macOS and Windows (I've not tested Linux, nor HIDPI display modes). Additional test case: CSS Grid.

Full problem details