ElMassimo / iles

๐Ÿ The joyful site generator
https://iles.pages.dev
MIT License
1.08k stars 31 forks source link

FOUC on Firefox #76

Closed innocenzi closed 2 years ago

innocenzi commented 2 years ago

Description ๐Ÿ“–

There is a bug in Firefox which causes a flash of unstyled content by displaying the markup, then the CSS.

A workaround is to add <script>0</script> right after <body>.

Is there a way to hook into the page generation process to add this workaround?

Reproduction ๐Ÿž

Screenshots ๐Ÿ“ท

On Firefox:

On Chrome:

ElMassimo commented 2 years ago

Hi Enzo!

Firefox has the weirdest bugs. Amazing that a bug like this has been open for four years.

The best place to inject the workaround script tag would be ssg.beforePageRender, right before the page is written to a file.

I'll take a deeper look later, perhaps we can add the workaround in รฎles like last time. Feel free to open a PR!

innocenzi commented 2 years ago

Yup, Firefox is weird. Thanks for the hook, I successfully implemented the workaround for now! :)

ElMassimo commented 2 years ago

Closing for now, users can workaround this Firefox issue by injecting <script>0</script> using ssg.beforePageRender.


The FOUC will only happen in Firefox when both of the following conditions are met:

We could add the workaround to iles by default, but perhaps it's better to wait until this issue is fixed in Firefox.

innocenzi commented 2 years ago

I agree that a workaround is not needed in Iles directly, however I think it could be documented in a troubleshooting section, as the problem is quite weird.

Would you like me to PR?

ElMassimo commented 2 years ago

That would be great, thanks!