How to deal with the Flickering of Undefined Variables?

Note: I’ll use the acronym FOUV for “Flickering of Undefined Variables” since CSS people have been using FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text) for such issues already.

This isn’t necessarily an issue related to CSS variables, it would also arise for classes or custom attributes. So it’s about injecting them in the critical rendering path to optimise the perceived experience.

Right now, in the iOS app, users might encounter some flickering when user settings are set. This is (probably) because the CSS variables are set using JavaScript when the DOM is loaded.

A few performance details we have to take into account:

the CSS variables are set on html, so they’re in theory the earliest possible in the DOM (when the stylesheets are retrieved, and styles computed, they’re defined if they’re already set);
we know that at least Blink (Chrome) has a special cache for them when they’re set on html, it’s an optimization trick they’re using to make them super fast since they’re global (and not scoped to an element);
ReadiumCSS is leveraging the inherit value whenever possible for user settings, which means the variable is strictly kept at the html level, and other elements inherit the value.

This is an issue which can’t obviously be scoped to ReadiumCSS only, it depends on a large amount of other factors e.g. computing pagination, loading assets like fonts, etc.

@HadrienGardeur has been willing to discuss an optimization for three weeks now so I’m taking the liberty of opening this issue on this repo so that everyone can weigh in and we can document all the factors we must take into account, and what our options are.

We’ll probably have to deal with FOIT or FOUT anyway (i.e. large embedded fonts) so FOUV could potentially be treated the same.

readium / readium-css

How to deal with the Flickering of Undefined Variables? #23