Flash of unstyled content when selecting a menu item #228
Comments
|
Thanks for the report (and video!), @yatil. That's a known and unfortunate consequence of the fact that the HTML page is assembled client-side for now: the browser first loads the raw content and then the right HTML template and CSS styles, which can take up to a few seconds and trigger the nasty flash. That problem does not exist in published snapshots, which contain generated pages. While the generation of a given page is automatic, the generation of an entire snapshot is still a manual process for now. What I'd like to do is to automate that generation so that the pages that get served on GitHub Pages can become the generated versions. That supposes also fixing the content negotiation issue noted in #68 (comment) for translations though... Anyway, we know the issue exists, and fixing it properly will take some time. I'll see if I can find a quick workaround in the meantime. |
Actually, there should be no need to fix that issue for now. If we stick to current naming convention, we just won't do any content negotiation on the version published through GitHub Pages. People will just always get the English version, with a possibility to switch to existing translations from the footer. |
|
Ah, OK, thanks for the clarification! |
|
My last comment may be a bit unclear. What I meant is that there is no need to fix the content negotiation issue, but the flashing effect should still be fixed, so keeping the issue open seems a good thing :) |
This update adds a script that generates all roadmap pages to a `.out` folder and copies relevant assets there as well. Addresses w3c#129 (and part of w3c#228 in the sense that we'll be able to replace the `gh-pages` branch with the generated pages). Under the hoods, the script uses JSDOM to load HTML pages, run the generation in individual pages, and save the generated HTML content. Some bits of code were adjusted accordingly not to create absolute URLs for translation links, and to respond to the right "load" event in generated documents.
This update adds a script that generates all roadmap pages to a `.out` folder and copies relevant assets there as well. Addresses #129 (and part of #228 in the sense that we'll be able to replace the `gh-pages` branch with the generated pages). Under the hoods, the script uses JSDOM to load HTML pages, run the generation in individual pages, and save the generated HTML content. Some bits of code were adjusted accordingly not to create absolute URLs for translation links, and to respond to the right "load" event in generated documents.
Fix for w3c#129. The pages published on GitHub so far were the semi-generated pages: the feature info and implementation info were generated after each push but the pages were assembled on the client device. With this update, pages in the `gh-pages` branch become the fully generated pages, meaning pages that have already been assembled and that are mostly static, except for a couple of scripts (one to handle the menu and one to implement the browser filtering mechanism). The update fixes the flickering issue (w3c#228) in published pages (technically, that problem still exists in page authoring mode, but that seems acceptable).
Fix #129. The pages published on GitHub so far were the semi-generated pages: the feature info and implementation info were generated after each push but the pages were assembled on the client device. With this update, pages in the `gh-pages` branch become the fully generated pages, meaning pages that have already been assembled and that are mostly static, except for a couple of scripts (one to handle the menu and one to implement the browser filtering mechanism). The update fixes the flickering issue (#228) in published pages (technically, that problem still exists in page authoring mode, but that seems acceptable).
|
Pages published on GitHub Pages now are the fully generated versions of the pages which:
Technically, the flashing effect still exists in development mode, meaning when a roadmap author edits the pages locally on her computer before committing a change. That's not fantastic, but I think we can live with it for now. Closing the issue accordingly. |
When selecting a menu item, the page sometimes only flashes unstyled content before loading all the surrounding data and CSS. That’s weird. (Observed in latest Safari on latest MacOS.
See video here: https://cl.ly/3a2O1h40133r
The text was updated successfully, but these errors were encountered: