Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FOUC (flash of unstyled content) when using sapper>0.28.0 #1531

Closed
martingraf4 opened this issue Sep 19, 2020 · 3 comments
Closed

FOUC (flash of unstyled content) when using sapper>0.28.0 #1531

martingraf4 opened this issue Sep 19, 2020 · 3 comments
Labels

Comments

@martingraf4
Copy link

@martingraf4 martingraf4 commented Sep 19, 2020

Describe the bug
There is a flash of unstyled content when using sapper version 0.28.1 or later (setting emitCss: false).

To Reproduce

  1. Clone Sapper project template rollup npx degit "sveltejs/sapper-template#rollup" my-app
  2. Change package.json to install sapper version 0.28.1 "sapper": "0.28.1" (the error also occurs in 0.28.7, the current version at the time of this writing, but 0.28.1 is the earliest version I could find in which the error occurs)
  3. Install dependencies npm i
  4. Change rollup.config.js so that svelte does not emit css emitCss: false
  5. Run the template npm run dev
  6. Open chrome, enable developer options and look at the network tab
  7. Visit localhost:3000
  8. The first loaded page is not styled
    image

Rolling back to sapper version 0.28.0 solves this issue.
image

Expected behavior
The general layout of the page should not change after loading more resources / the first loaded page should contain inlined css.

Severity
Blocking an upgrade to sapper versions greater than 0.28.0

@njbotkin
Copy link

@njbotkin njbotkin commented Sep 19, 2020

For my project (with emitCss: true), the issue appears to begin in 0.28.7.

@benmccann
Copy link
Contributor

@benmccann benmccann commented Sep 19, 2020

@njbotkin your issue is a different one if you have emitCss: true. I found the issue with emitCss: false and have sent a PR to fix it. I have not seen any issues with emitCss: true. Can you file a new issue with a way to reproduce or share a sample site where this is happening or give more details of some sort?

@benmccann
Copy link
Contributor

@benmccann benmccann commented Sep 20, 2020

@njbotkin 0.28.8 has been released with additional fixes. If you are still having an issue with the latest version please let me know and give me more details about how I can see the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

3 participants
You can’t perform that action at this time.