Right now we select all state-collapsed elements when the document is ready and hide them (without animation, but still, they are hidden *after* they are first shown, no matter how short that initial show is). The problem with that is that it is a exponentially slow operation (ON).
By using CSS instead the initial state will be reflected immediately without any delay. Just like CSS "a { color: green; }" will make all anchor tags green (even anchor tags parsed after the CSS was parsed), likewise CSS like ".client-js .mw-collapsed { hidden }" will make them hidden without delay.
On top of this, we can build further and also optimise the cost of animations. Instead of animating with javascript, lets let JavaScript only toggle classes and the CSS will take care of the state and (if CSS3 is supported) make the transition animated.
ux notes
As a result of this issue, when loading pages that have templates with show/hide functionality for additional content, the templates start out open, then close, which results in a poor experience (e.g. text reflowing, elements jumping around on the page).
Check out:
https://en.wikipedia.org/wiki/Labastide-Esparbairenque
https://en.wikipedia.org/wiki/Solo_(music)
developer notes
The issue is demonstrated in https://en.wikipedia.org/wiki/Labastide-Esparbairenque?useskin=vector (see page issue)
A simple css rule targetting client-js and hiding uninitialised collapsable initially collapsed content elements would be a good start. This rule would ensure content is shown with js disabled.
The code that handles the collapsing is in https://github.com/wikimedia/mediawiki/blob/master/resources/src/jquery/jquery.makeCollapsible.js
The fix should be easy but we will probably need to seek input from people familiar with this code as part of our code review process
https://phabricator.wikimedia.org/T42812#3644347
Testing criteria
- This will need some exploratory test
- Visit http://reading-web-staging.wmflabs.org/wiki/California on desktop
- Search for the text "Expand".
- With this viewable in the page, refresh the browser. When the page loads the content that is expandable should be hidden by default
- Disable JavaScript and the content should be visible by default
- Explore other pages, which include the text "expand" - are there any examples of pages where content disappears on page load like this (?):
