question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:

Aug-24-2019 15-03-57

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:open
  • Created 4 years ago
  • Reactions:4
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
haoranpbcommented, Mar 5, 2020

@bml104 In your case, change your base into /vuepress-ext-test/, see more detail at gitlab-pages-and-gitlab-ci

1reaction
haoranpbcommented, Mar 5, 2020

@bml104 can you provide a reproduction repo? thanks.

@kiwicopple 's website seems to be working fine right now

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found