search

electerious / ackee-tracker

Transfer data to Ackee.
MIT License
196 stars 22 forks source link

The script causes visible layout issues when loading #12

Closed makew0rld closed 4 years ago

makew0rld commented 4 years ago

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.

electerious commented 4 years ago

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.

makew0rld commented 4 years ago

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?

electerious commented 4 years ago

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

makew0rld commented 4 years ago

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

makew0rld commented 4 years ago

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

Pomax commented 4 years ago

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

image

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.

makew0rld commented 4 years ago

@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?

electerious commented 4 years ago

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!

electerious commented 4 years ago

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