Getting wrong window height in chrome

Question

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(), window.innerHeight and window.innerWidth, but all of them 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 colour "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 there 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 its width is 856 though! Once again Firefox has the correct width.

Answer 1

I maintain a library called iframe-resizer, which sizes iframes to match their content, so I have spent a number of years looking for the best solution to this problem.

The simple answer is that if your CSS causes content to overflow the body element, it gets complicated and unreliable.

My library offer a number of different methods for working this out and they present different trade offs.

To start with the browser offers four different values for height and width and these often give differing answers

document.body.offsetHeight
document.body.scrollHeight
document.documentElement.offsetHeight
document.documentElement.scrollHeight

You may find one of these works for you, or you might read all four and use the largest value.

If that doesn’t work we can brute force a better value by getting the bottom position of every element on the page and working out the lowest value.

 function getAbsoluteHeight() {
   var allElements = document.querySelectorAll('body *')
   var maxBottomVal = 0

   Array.prototype.forEach.call(allElements, function(el) {
     var styles = window.getComputedStyle(el)
     var marginBottom = 0

     if (styles.marginBottom && !isNaN(parseInt(styles.marginBottom), 10)) {
        marginBottom = parseInt(styles.marginBottom, 10)
     }

     var posBottom = el.getBoundingClientRect().bottom
     var elBottom = marginBottom + posBottom

     if (elBottom > maxBottomVal) {
        maxBottomVal = elBottom
     }
   })

   return Math.ceil(maxBottomVal)
}

This obviously has somewhat of an overhead if you have to recheck it every time the content on the page changes, or the window is resized. If you know which elements are likely at the bottom of the page you could tag them with a data-height attribute and then on check the position of those element with that added to it.

Although I’ve only talked about height here, everything will also work with width.