Page MenuHomePhabricator

Text above headings not selectable when using Skin:Refreshed
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
SomeRandomDeveloper
Jun 15 2025, 3:05 PM
Referenced Files
F62371308: no_js.png
Jun 18 2025, 4:53 AM
F62371306: yes_js.png
Jun 18 2025, 4:53 AM
F62371338: hitbox.png
Jun 18 2025, 4:53 AM
F62337117: image.png
Jun 15 2025, 3:05 PM
F62337070: image.png
Jun 15 2025, 3:05 PM
F62337062: image.png
Jun 15 2025, 3:05 PM

Description

Steps to replicate the issue (include links if applicable):

image.png (1,025×128 px, 13 KB)

What happens?:

The text of the heading is being selected, while the mouse cursor is over the text of the paragraph (the mouse cursor position is at the tip of the arrow in the screenshot).

image.png (126×96 px, 5 KB)

What should have happened instead?:

The text of the paragraph should be selected instead.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

MW: 1.43.1 (cde4276)
Refreshed: 4.0.8 (69f4d5a)

Other information (browser name/version, screenshots, etc.):

The paddingTop and marginTop properties are added to all headings by the following function:
https://github.com/wikimedia/mediawiki-skins-Refreshed/blob/264c1c631b2f52390bd7ff9ad856f0fed234de5d/refreshed/scripts/refreshed.js#L78-L90
This causes the "hitbox" of the headings to extend beyond their visible area:

image.png (285×134 px, 11 KB)

This is only reproducible on MediaWiki 1.43 because the class for headings appears to have been renamed from mw-headline to mw-heading since, which causes the padding and margin to no longer be added.

Event Timeline

@ashley asked me to weigh in on this.

This is only reproducible on MediaWiki 1.43 because the class for headings appears to have been renamed from mw-headline to mw-heading since, which causes the padding and margin to no longer be added.

Note that the old mw-headline goes on a different HTML node than the new mw-heading, see https://www.mediawiki.org/wiki/Heading_HTML_changes#What's_changing. Changing headlineClass: 'mw-headline', to headlineClass: 'mw-heading', may or may not work, you'll have to try and test it. If it doesn't work, you'll have to figure out what other changes are needed.

I suspect that what you really want is to set https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top on the html node in CSS (equal to the height of the sticky header), and remove that JS code entirely.

I suspect that what you really want is to set https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top on the html node in CSS (equal to the height of the sticky header), and remove that JS code entirely.

cc'ing @MtMNC as the original author of the JS snippet in question (in 3168dd455803ae5fb6f8ca79999836480d5e931e); the refreshed.js file hasn't been touched since January 2020 so it seems likely to me that some parts of it are probably no longer needed, especially if and when we'd be interested in supporting (only) the LTS releases of MediaWiki.

Change #1160459 had a related patch set uploaded (by MtMNC; author: MtMNC):

[mediawiki/skins/Refreshed@master] Move headers below toolbox with scroll-padding-top

https://gerrit.wikimedia.org/r/1160459

@matmarex and @ashley thanks for solving. I've submitted a patch for review that applies scroll-padding-top to html instead of padding-top and margin-top to .mw-headline. It still uses JS to increase the scroll padding in case the toolbox is sticky. There's probably a better, JS-free way to do it, but this patch is simple at least.

The "hitbox" isn't big anymore, so highlighting should behave as expected.

hitbox.png (313×172 px, 25 KB)

Also, the changes bump down the headers correctly.

JS enabled:

yes_js.png (471×187 px, 30 KB)

JS disabled:

no_js.png (475×148 px, 24 KB)

These screenshots are from MW 1.43. Since this patch doesn't apply padding or margins to the headers anymore, it should work on earlier MW versions with .mw-headline too.

Change #1160459 merged by jenkins-bot:

[mediawiki/skins/Refreshed@master] Move headers below toolbox with scroll-padding-top

https://gerrit.wikimedia.org/r/1160459

matmarex assigned this task to MtMNC.

Thanks!

Change #1163487 had a related patch set uploaded (by SomeRandomDeveloper; author: MtMNC):

[mediawiki/skins/Refreshed@REL1_44] Move headers below toolbox with scroll-padding-top

https://gerrit.wikimedia.org/r/1163487

Change #1163488 had a related patch set uploaded (by SomeRandomDeveloper; author: MtMNC):

[mediawiki/skins/Refreshed@REL1_43] Move headers below toolbox with scroll-padding-top

https://gerrit.wikimedia.org/r/1163488

Change #1163488 merged by jenkins-bot:

[mediawiki/skins/Refreshed@REL1_43] Move headers below toolbox with scroll-padding-top

https://gerrit.wikimedia.org/r/1163488

Change #1163487 merged by jenkins-bot:

[mediawiki/skins/Refreshed@REL1_44] Move headers below toolbox with scroll-padding-top

https://gerrit.wikimedia.org/r/1163487