Getting wrong window height in chrome

Hi I'm trying to get the correct width and height of the browser window in Chrome. The size is correct in Firefox, I have not tried any other browsers.

I have set the doctype to "!DOCTYPE html", and have tried $( window ).height(), $( window ).width() and window.innerHeight, window.innerWidth and all give the wrong values.

I'm running openSuse tumbleweed and the version of chrome is "Version 86.0.4240.75 (Official Build) (64-bit)"

Updated chrome to "Version 87.0.4280.88 (Official Build) (64-bit)" this did not help either, still the wrong size.

I have included a couple in images that show this, NOTICE: the DOMRect values are not correct in chrome but are correct in firefox. Sorry, you may need to zoom in to see the values. Below is what I'm logging in the two images.

console.log(
    $('#primary')[0].getBoundingClientRect(),
    $( window ).width(),
    window.innerWidth,
    $( window ).height(),
    window.innerHeight
)

I need precise sizes as to have things line up correctly. You can see in the firefox image below the background color "red" just above the horizontal scrollbar. I need to know the correct dimensions of the window so I can do the math and make things line up.

Is a another way more accurate to do this?

The image below is what I got from the jsfiddle suggested in the comment below form "FSDford". You can see in the console the size 877 in red "need to zoom in to see it". The ruler says it's width is 856 though! Once again Firefox has the correct width.

from Getting wrong window height in chrome