Flash of unstyled content
See original GitHub issue- I confirm that this is an issue rather than a question.
Bug report
On my website I have a flash of unstyled content:
Steps to reproduce
I thought perhaps it was related to https://github.com/vuejs/vuepress/issues/895, however my version is @vuepress/core": “1.0.3”
Here is the repo: https://github.com/kiwicopple/paul.copplest.one
What is expected?
(hopefully) the pre-rendered content displays quickly enough to avoid the FOUC, and the content is readable as soon as possible
What is actually happening?
When the page is loading there is no visible content. just some black bars. After a while the page is rendered correctly. I am hosting on Netlify, so I surprised that it is a speed of CSS. Is there a way I can improve the initial loading of CSS?
Other relevant information
- Output of
npx vuepress info
in my VuePress project: (note that I don’t install vuepress globally, it’s run within the repo)
npm show vuepress version
1.0.3
npm show @vuepress/core version
1.0.3
npm show @vuepress/theme-default version
1.0.3
npx vuepress info:
System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm
Browsers:
Chrome: 76.0.3809.100
Firefox: 68.0.2
Safari: 12.1.2
npmPackages:
@vuepress/core: Not Found
@vuepress/theme-default: Not Found
vuepress: Not Found
npmGlobalPackages:
vuepress: Not Found
Issue Analytics
- State:
- Created 4 years ago
- Reactions:4
- Comments:5 (2 by maintainers)
Top Results From Across the Web
What the FOUC is happening: Flash of Unstyled Content
This situation occurs whenever a Web browser ends up showing your Web page's content without having any style information yet. and the "exactly ......
Read more >Eliminate flash of unstyled content - css - Stack Overflow
The problem with using a css style to initially hide some page elements, and then using javascript to change the style back to...
Read more >How to prevent Flash of Unstyled Content on your websites
Discover ways to stop Flash of Unstyled Content (FOUC) from occurring on your sites or at least reduce the possibility that your sites...
Read more >How to get rid of the flash of unstyled content - Fabien Lasserre
People are still trying to fix this but lucky for us there's a simple hack we can use as a workaround to this...
Read more >How to get rid of the Flash Of Unstyled Content - Medium
The first thing we want to do is simply to add a CSS instruction so that our body is hidden from the page...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@bml104 In your case, change your
base
into/vuepress-ext-test/
, see more detail at gitlab-pages-and-gitlab-ci@bml104 can you provide a reproduction repo? thanks.
@kiwicopple 's website seems to be working fine right now