Page MenuHomePhabricator

[Hackathon 2017] "Progressive Enhancement": Added JS makes UI jump
Closed, ResolvedPublic

Description

Problem: In several interfaces, our UI "jumps" after JavaScript has been loaded and "enhanced" the page.

Context: Many functions on Mediawiki need to be accessible with and without Javascript. Typically there is a plain HTML/CSS version and JavaScript is added to do a "progressive enhancement" of the existing html/css.

Solution: We hope there is a solution or established practice to avoid the jumps.

Reading:
Progressive Enhancement: https://alistapart.com/article/understandingprogressiveenhancement
A similar CSS problem: https://en.wikipedia.org/wiki/Flash_of_unstyled_content

Event Timeline

As explained by @Volker_E : We can use the class "client-js" which is on the <html> element.

image.png (37×390 px, 4 KB)

So e.g. if the javascript would hide an element, you can already make a CSS style that hides that element already without the javascript having kicked in yet.

Lydia_Pintscher claimed this task.

Closing this as the hackathon is over and there is the other task.