Bug: Elements are giving wrong larger heights for Javascript in development mode

I was trying to get an element height and seems that when you are with yarn start working (dev mode), some document elements get a wrong height doing like this:

To get site header height I use: document.querySelector('.site-header').clientHeight it returns 299 when this real height is 145.

I tested in common.js, in main.js directly, adding a tag inside the body, same result when you’re in dev mode. Even with jQuery version $(’.site-header’).height(), same result, 299.

Then, I tried just with yarn build and opening the pages and gets correct height, 145.

I really don’t know what is going on, I don’t know if something related with some Webpack plugin (I’m bit newbie with webpack, sorry)

Somebody had similar behavior like this? Hope somebody can try or let me know if something is wrong.

It was driving me crazy :sob::joy:

PD: I’m on Sage 9.0.9 btw :slight_smile:

Well, seems is because how Webpack injects styles in the head with that <link src="blob:.., those few milliseconds that it takes to inject styles file, JS gets first the height without the styles :sob:

I will continue testing…

Yep, css is injected after all … Had the same probleme and had to force css and js . to compile on watch mode.
Check this: https://github.com/roots/sage/issues/1826
Hope it’s help :slight_smile:

Hey Arnaud, thanks for thar reply.

I will check later if nicooprat solution in Github works, I will tell.

Again, thank you!