Hello everyone! I am building a phoenix app at the moment and I wonder why is Firefox not loading css properly (a page without any style appears for a second before displaying the proper loaded page ). I note that it works perfectly fine on other browsers. Any idea about what might be wrong with it ? Or is there a specific tip to do to load css properly on one or some browsers?
Thanks !
check your browser console to see if there is anything strange.
1 Like
What is the size of the file?
This is in dev or prod environment?
Large css fies can take a while to load and show pages without any style, tailwindcss without JIT is an example that happens constantly.
1 Like
Just some warnings about unknown properties in the css section.
61.8 kB in total with other .css files .
I am currently in dev environment,
If the issue is related to the files size, what would be the solution ?
61Kb should not be a problem, it seems that in some sites it happens with firefox, it is called FOUC (flash of unstyled content) and there are a few hacks to solve it.
Apparently the reason is that the style was loaded but for some reason not parsed entirely, so while the content is totally loaded and can show, the css isn’t ready to be applied yet.
The solution depends on what is triggering it and without knowing the entire css and html it is impossible for us to figure out, what you can do is start removing rules from the css files, starting with imports and directives.
If this fix the problem, probably it wont happen in production when the bundler inline and minify everything.
You can also try to run your app in prod mode and see if the problem happens before removing stuff from the files.
1 Like
Ok, thanks. I’m gonna check it
I had the same problem.
Fixed by adding
<script>0</script>
in body
(weird hack but seems to fix it)
2 Likes
What?? Thanks man it worked partially, how did you figure that out?
I found it here : css - Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer? - Stack Overflow
1 Like
This is incredible 
