Highlight drawn incorrectly when body margins are 0

I created a little landmarks test page, which I want to completely fill the browser’s height and width without scrolling. When I set CSS margin for body to 0;

• the highlight border box is drawn a bit too small on the right (except for the nav)
• the nav’s highlight title is drawn too far to the right (the other highlight titles are drawn in the correct place)

To see the difference between correct highlighting and incorrect highlighting, first run the example and use <kbd>Alt + Shift + N</kbd> (Windows) to move through the landmarks. Note that the highlights are drawn a little bit off:

Now open DevTools (I’m using Chrome, but saw this in Firefox as well) and uncheck the body style for margin: 0;. The body inherits an 8px margin from the browser’s style sheet, which causes an annoying vertical scrollbar, but the highlights are ok:

[matatk]

Thanks for the helpful debugging @carmacleod. I’ll look into it soon. (As it happens, I hadn’t recieved notification of this when you reported it, sorry for the laggy reply.)

[matatk]

Here we go…

• Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1689188
• Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1171408