Page MenuHomePhabricator

Links to sections on talk pages with collapsible header templates are unreliable (due to templates collapsing late and moving the page content)
Closed, ResolvedPublic

Description

Links to sections on talk pages with collapsible header templates are unreliable (due to templates collapsing late and moving the page content).

Copying discussion from another task:

@alexhollender_WMF also identified an issue where if you navigate directly to a section within a talk page (e.g. link 1) the wrong section within the ToC is highlighted (Actual: Etymology-Literature vs. Expected: please unclutter the montage).

Question: do we think the patch(es) that will fix the issue this ticket currently describes might also cover the issue I described above?

This looks unrelated. I think this problem is caused by the templates at the top, as some of them collapse with a delay as the page loads, causing the page content to move after your browser already jumped to the section. I don't know right now if this is a problem with the template markup, with some Wikipedia customization code, or with one of our teams's code. We should file a separate bug. (Also, this might be the same issue: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Section_links_don't_work_anymore.)

You can watch this happen if you zoom out a bunch (so that you can see the whole talk page header), then throttle download speed in browser developer tools to make the page load slower.

Page still loading
image.png (2×3 px, 516 KB)
Page loaded
image.png (2×3 px, 505 KB)

Video:

Event Timeline

This is a problem with English Wikipedia's customization that extends the handling of collapsible content provided by MediaWiki.

MediaWiki supports basically two CSS classes: mw-collapsible to make something collapsible (but shown by default), and mw-collapsed to also make it hidden by default. (There are some other weird options that no one uses.) https://www.mediawiki.org/wiki/Manual:Collapsible_elements

English Wikipedia has custom JS code that adds some other options, notably innercollapse and outercollapse, which allow content with the first class to be hidden by default only if it is also wrapped in the second class. https://en.wikipedia.org/wiki/Help:Collapsing#"innercollapse"_and_"outercollapse"

This mechanism is used by the templates generating the talk page banners: https://en.wikipedia.org/wiki/Template:WPBannerMeta/core and https://en.wikipedia.org/wiki/Template:Banner_holder. This way, each WikiProject banner is made collapsible if they're wrapped in the banner holder (e.g. on https://en.wikipedia.org/wiki/Talk:Paris), but not if they aren't (e.g. https://en.wikipedia.org/wiki/Talk:Azincourt).

Generally, collapsible content in MediaWiki causes issues like this, because it is only collapsed after the page loads and JavaScript executes (to remain accessible for no-JS users), which can be after the browser has already jumped to the target section. But the mw-collapsed class has some extremely clever styles to hide content using just CSS (T42812), which prevent the problem most of the time. innercollapse/outercollapse do not (the help page I linked above actually document this: "Using this technique causes the page to reflow/jump around and should generally be avoided.").

I don't really understand why this problem would pop up now. It seems that the templates and the custom JS code hasn't been changed in a while.

This could be fixed with CSS like this:

/* Avoid FOUC/reflows on collapsed elements. */
/* This copies MediaWiki's solution for T42812 to apply to innercollapse/outercollapse (T325115). */
/* Reference: https://gerrit.wikimedia.org/g/mediawiki/core/+/ecda06cb2aef55b77c4b4d7ecda492d634419ead/resources/src/jquery/jquery.makeCollapsible.styles.less#75 */
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > p,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > table,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > thead + tbody,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) tr:not( :first-child ),
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) .mw-collapsible-content {
	display: none;
}

This could go either in MediaWiki:Common.css (maybe around here: https://en.wikipedia.org/wiki/MediaWiki:Common.css#L-40), or somewhere in TemplateStyles of the relevant templates.

I'll leave a message at https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Section_links_don't_work_anymore and let someone else decide (but remind me if it doesn't get done, I'll do it myself then).

Since folks seem to be fine with my proposal but no one actually applied the fix, I applied it myself now: https://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&diff=1128366016&oldid=1109218083. The issue with section links on those pages should be resolved.