Size of HTML elements are different when inspecting with browser tools vs. getting size with Javascript

I'm using several different methods in my Javascript file to get the height of a fixed header on my site and in turn set that height as the padding for the main content (so that on load the content sits below the fixed header.

I'm using getClientBoundingRect as well as jquery. Each method returns the same result (i.e. in this instance 56), but when I inspect the element through the browser tools the height of my header is different (i.e. in this instance 98px). Only once when I reloaded the page did the Javascript return the correct height.

In addition, I first tried multiple reloads with my screen width under 767px to simulate mobile. None of the reloads would return the correct height of the header compared to what the browser inspector was visually showing me. So I pushed my site live and tested it on an actual iPhone in mobile safari and it worked correctly. The Javascript was returning the correct height of the fixed header and setting that value as the padding for the main content.

• I'm building a wordpress site, and I am registering my javascript file in the functions.php file.
• I'm viewing the desktop version of the site in Firefox.
• The css on the html header element has the box sizing set to border box. And even if it wasn't set to border box, the addition of the hmtl element + margin and padding doesn't calculate to 98px (the size of the header).

Why are the values returned by the javascript different than the actual header height in browser? I've read a lot of documentation

https://stackoverflow.com/questions/65866215/size-of-html-elements-are-different-when-inspecting-with-browser-tools-vs-getti January 24, 2021 at 09:07AM