The script causes visible layout issues when loading

Question

The script causes visible layout issues when loading

makew0rld opened this issue 4 years ago · comments

The Firefox console notifies me that:

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

It also says that the problem is at 1:15966, aka the 15,966th character in the script.

It is correct, as I was able to see repainting occur, where the style loaded once incorrectly, and then was corrected. This doesn't happen when I remove the script, but occurs no matter where I place it, at the bottom, at the top, without async, with defer, etc.

Tobias Reich · Answer 1 · Mon May 25 2020 03:11:00 GMT+0800 (China Standard Time)

You can take a closer look at the source, but I'm not aware of something that could trigger a layout change. It doesn't occur on my sites.

Let me know if you find out more.

makeworld · Answer 2 · Mon May 25 2020 03:29:24 GMT+0800 (China Standard Time)

My site is https://www.makeworld.gq/ or here on Github. When I remove the script their are no more loading issues. Can you confirm this with my site?

Tobias Reich · Answer 3 · Tue May 26 2020 20:10:45 GMT+0800 (China Standard Time)

It's caused by a function called isScrollable. This function isn't part of Ackee.

makeworld · Answer 4 · Tue May 26 2020 21:34:53 GMT+0800 (China Standard Time)

Thanks so much for looking at it. Where is that function in my website?

makeworld · Answer 5 · Tue May 26 2020 23:58:52 GMT+0800 (China Standard Time)

Because I don't see how isScrollable could come up anywhere.

Pomax · Answer 6 · Mon Sep 14 2020 03:55:55 GMT+0800 (China Standard Time)

You can "prettify" sources, so you can actually see normal code:

clicking that, we can now see that this is actually ackee, because of this line:

browserWidth:
            document.documentElement.clientWidth || window.outerWidth,

Asking the browser for clientWidth forces the browser to evaluate the DOM, even if it wasn't ready to do that yet, hence the "Layout was forced before the page was fully loaded" error.

makeworld · Answer 7 · Mon Sep 14 2020 04:27:10 GMT+0800 (China Standard Time)

@Pomax Aha! Thanks for figuring this out. @electerious Can you update the script to not require this? Seems like you can just use window.outerWidth maybe?

Tobias Reich · Answer 8 · Mon Sep 14 2020 15:07:01 GMT+0800 (China Standard Time)

Good to know. We can switch to window.outerWidth and window.outerHeight as we're talking from the browser width/height anyway. document.documentElement.clientWidth is the width of the website area (without the browser toolbar, sidebar and other panels).

PR welcome!

Tobias Reich · Answer 9 · Sun Sep 27 2020 18:03:29 GMT+0800 (China Standard Time)

I've adjusted the script. The issue will be fixed in the next release of ackee-tracker.