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 and Safari 14, on macOS and Windows (I've not tested Linux, nor HIDPI display modes). Additional test case: CSS Flexbox.

Full problem details