Different getBoundingClientRect() values on prod and dev

[mlbonniec]

Bug report

Describe the bug

In development mode, the method element.getBoundingClientRect() returns the right values. In production mode, after being build, the values are wrong.
I have a feeling it has something to do with importing the CSS (scss). For elements like span, which are only styled, they are 0 in width, which means that the CSS has not been fully loaded. (only in production as well)

To Reproduce

componentDidMount() {
    const element = document.getElementById("bouding");

    console.log(element.getBoundingClientRect());
}

render() {
    return <h1 className="bouding">bouding element</h1>
}

Expected behavior

In development mode I get these data
Development

{
    bottom: 430.5,
    height: 5,
    left: 104,
    right: 204,
    top: 425.5,
    width: 100,
    x: 104,
    ​y: 425.5
}

While in production it's totally different, and wrong...
Production:

{
    bottom: 2127.683349609375,
    height: 16,
    left: 8,
    right: 8,
    top: 2111.683349609375,
    width: 0,
    x: 8,
    y: 2111.683349609375
}

System information

• OS: macOS Catalina 10.15.1
• Browser Safari 13.0.3 and Firefox Developer Edition 78.0b3
• Version of Next.js: 9.4.1
• Version of Node.js: 12.16.1

[mlbonniec]

Just a question. I've created two issues, this one and another one. Why were they placed in "discussion" and didn't stay in the issues tab ? Thanks 😄

[timneutkens]

They're not actionable as "bugs" in Next.js, they're bugs in your application so they belong in discussions.

[mlbonniec]

Yet it's probably a problem during the build of Next, isn't it ? 😅

[ryan-reach]

@mlbonniec we were experiencing a similar issue, and it had to do with our fonts loading after our element dimensions were calculated, which affected the element dimensions. hope it helps!

[mlbonniec]

Oh it's possible! I load a font from Google Fonts, I'll see that. Thanks, I'll let you know!

[mlbonniec]

Excellent! That's what it was! I loaded the font from Google Fonts into the CSS with @import. I changed it to a <link href="..." /> tag in my head. And it works. Thank you very much!

[mlbonniec]

@ryan-reach Hi! That was indeed the case, but sometimes in production mode, the problem always arises. How did you fix this problem?

[Tylerian]

@mlbonniec Check out Google's WebFontLoader