Feature/improve css startup#165
Conversation
This is copied from https://raw.githubusercontent.com/pmarsceill/just-the-docs/master/_includes/head.html, and presets the correct style based on https://web.dev/prefers-color-scheme/
The switching is done by using css directly.
for more information, see https://pre-commit.ci
|
Thank you your for contribution. I'm no expert but this looks reasonable. What do you think @henryiii and/or @matthewfeickert? @KubaO, do you happen to have a couple of snapshots of the issues you found and the updated version with them fixed? |
|
The problem manifests on first page load (cold caches) in chromium based browsers and is especially jarring in the Edge browser. There’s a bright white flash while the page loads, since the background is selected from the wrong css, and then as soon as the script switches the style sheet, the dark stylesheet has to be loaded and only then can the page be properly rendered. So it slows down initial page display and blinds you at night :)
I’ve been pushed to solve this problem while working on my own personal page that uses this same theme.
I’m not sure what snapshots those would be – page load profile traces show what’s up. Is that what you meant? I could attach some before/after pictures of the traces.
I’ll try to get this submitted upstream and will then drop another PR that will remove the `head.html` include. In case it wasn’t clear: that include is copied directly from the theme and has the css bits added, as there is no other customization point for that.
… 6 dec. 2021 kl. 9:28 fm skrev Eduardo Rodrigues ***@***.***>:
Thank you your for contribution.
I'm no expert but this looks reasonable. What do you think @henryiii and/or @matthewfeickert?
@KubaO, do you happen to have a couple of snapshots of the issues you found and the updated version with them fixed?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
Triage notifications on the go with GitHub Mobile for iOS or Android.
|
|
No worries, I understand that it's not obvious to catch the temporary status of the page. Forget about it. Am approving and will just wait for an extra pair of eyes. Again thank you for the contribution. |
I tried to get the current js version submitted upstream in January (just-the-docs/just-the-docs#560) and was blocked by this very issue (and I think it was also Edge that was the most obvious). Does this switch if you change the light/dark scheme after loading the page? If it doesn't, you could just remove the final line of the js instead of the whole script - that should default correctly, and support changes. |
|
Yep, it’s automagical almost :)
… 6 dec. 2021 kl. 11:31 fm skrev Henry Schreiner ***@***.***>:
I’ll try to get this submitted upstream and will then drop another PR that will remove the head.html include.
I tried to get the current js version submitted upstream in January (just-the-docs/just-the-docs#560) and was blocked by this very issue (and I think it was also Edge that was the most obvious).
Does this switch if you change the light/dark scheme after loading the page?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
Triage notifications on the go with GitHub Mobile for iOS or Android.
|
|
Would you like me to update my PR with this version? I'm happy to have you directly contribute if you'd rather. For us, let's merge this and see what it looks like live. :) |
|
Feel free to update your PR. Less work for me :) Thank you!
… 7 dec. 2021 kl. 12:00 fm skrev Henry Schreiner ***@***.***>:
Would you like me to update my PR with this version? I'm happy to have you directly contribute if you'd rather. For us, let's merge this and see what it looks like live. :)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
Triage notifications on the go with GitHub Mobile for iOS or Android.
|
Improve startup rendering and get rid of flicker in some browsers. That was caused by using a default stylesheet and only switching it after it was loaded. Instead, we let the browser's renderer do the right thing.