Page MenuHomePhabricator

Pages often have reflows due to jquery.makeCollapsible collapsible content
Closed, DuplicatePublic

Description

We could probably significantly avoid the amount of required reflows due to presence of mw-collapisble, by adding a styles module with something like:

.client-js .mw-collapsible.mw-collapsed .mw-collapsible-content {
        display: none;
}       
.client-js table.mw-collapsible.mw-collapsed > tbody > tr:not(:first-child) {
        display: none;
}

That won't fix them all, but a significant reduction might already be worthwhile

I made similar changes at some point for collapsible tables on en.wp and it had a significant impact on 'jumping page' complaints.

/* Reduce page jumps by hiding collapsed/dismissed content */
.client-js .collapsible.collapsed > tbody > tr:not(:first-child) {
    display: none;
}

Event Timeline

TheDJ updated the task description. (Show Details)
TheDJ added a subscriber: Volker_E.

Duplicate of T42812? Or not?

Please beware, because jquery.makeCollapsible is unreasonably flexible, and it would really suck if we accidentally hidden something with CSS that will not get unhidden with JS.

I'm not sure how much this will really gain. The <div class="mw-collapsible-content"> is optional in markup (content can just be in <div class="mw-collapsible"> without extra wrapping, in which case <div class="mw-collapsible-content"> will be insrted in JS). But it might be worth it.