:target reference link is hard to see due to low contrast background color
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Jack_who_built_the_house
	Jan 25 2025, 10:06 AM

Description

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

Go to https://en.wikipedia.org/wiki/New_wave_of_British_heavy_metal#cite_note-FOOTNOTEKiss_Chartsn.d.(a)-33
Click the ^ link
Try to visually find where the target reference is

What happens?:
Not only, due to changes after T317661, the top of the viewport now doesn't correspond to the top of the element targeted by the link. Due to the low-contrast color value of --background-color-progressive-subtle (#f1f4fd in light mode), it is really hard to notice.

What should have happened instead?:
It should be immediately clear to the user which reference link is the target one; that is, [33].

Technical details
The :target style is set by this rule:

ol.references li:target,sup.reference:target {
  background-color: var(--background-color-progressive-subtle,#f1f4fd)
}

Please change tags of this task to the most appropriate if they aren't.

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Separate desired heading scroll offset from sticky header height	mediawiki/skins/Vector	master	+29 -24

Customize query in gerrit

Related Objects

Mentioned Here: T317661: [Table of contents] Increase threshold for when a section is active

Event Timeline

Jack_who_built_the_house created this task.Jan 25 2025, 10:06 AM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptJan 25 2025, 10:06 AM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Jack_who_built_the_house updated the task description. (Show Details)Jan 25 2025, 10:06 AM

Jack_who_built_the_house updated the task description. (Show Details)

--background-color-progressive-subtle is expectedly very...subtle here. Is this a regression though? Was it previously easier to identify the target reference?

CCiufo-WMF moved this task from Inbox to Triaging on the Design-System-Team board.Jan 29 2025, 11:21 PM

In T384777#10506831, @CCiufo-WMF wrote:

--background-color-progressive-subtle is expectedly very...subtle here. Is this a regression though? Was it previously easier to identify the target reference?

Subjectively yes, it was #eaf3ff which was easier to identify, even though the difference is small as I now see.

Noting Cite is the correct tag here for making a chance (if desired). I'll keep the Design-System-Team tag in case there are any questions about other potential token usage.

Change #1134313 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/Vector@master] Separate desired heading scroll offset from sticky header height

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

gerritbot added a project: Patch-For-Review.Apr 5 2025, 1:46 AM

matmarex subscribed.Apr 5 2025, 1:47 AM

Change #1134313 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Separate desired heading scroll offset from sticky header height

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

Maintenance_bot removed a project: Patch-For-Review.Jun 17 2025, 3:31 PM

ReleaseTaggerBot added a project: MW-1.45-notes (1.45.0-wmf.7; 2025-06-24).Jun 17 2025, 4:00 PM

After the change the ref will be at the top of the window after following the backlink, making it a bit easier to find:

It's still a very small element, so it's not exactly prominent, but I don't think that can be fixed by slightly changing the shade of the blue background. It would need some different visual effect, I don't know what that should be and whether it'd be desirable. I would close this task now.

@matmarex Thanks, this improves the situation, albeit partially. I have some general criticism about how in-page links work (I believe this 75px scroll intersection threshold is flawed, especially the fact that it's bound to how section links behave – e.g. go to https://en.wiktionary.org/wiki/Appendix:Glossary and click the link in "See second person."), but that's a separate big conversation.

I agree that the 75px is weird, but note that after my changes, it will be only applied when linking to a section header. The link target in your example will be aligned with the top of the page, just like the reference backlink targets.

In T384777#10939653, @matmarex wrote:

I agree that the 75px is weird, but note that after my changes, it will be only applied when linking to a section header. The link target in your example will be aligned with the top of the page, just like the reference backlink targets.

Ah right, sorry, these are definition list terms, not headings (and thanks for fixing this, I actually checked your code and noticed that).

I had headings in mind – you also often have e.g. two h4 headings very close, and it's unclear which section is linked, especially given that you often have random jumps while pages are loading due to some elements being updated and moving content a bit down or up.

But, by the way, there will be a bit of inconsistency now that headings like h4 will have a margin while definition list terms (;) will not. This may confuse the users.

	F62394068: image.png
	Jun 19 2025, 6:46 PM

:target reference link is hard to see due to low contrast background colorClosed, ResolvedPublicBUG REPORTActions

Description

Details

Related Objects

Event Timeline

:target reference link is hard to see due to low contrast background color
Closed, ResolvedPublicBUG REPORT
Actions