TOC jumps to the wrong section

[williamsp]

Describe the Bug

Clicking link on table of contents on a long page when we are at the top of the page ("Back to top" is not visible) will jump to the wrong section.

Steps to reproduce the behavior:

1. Go to https://starcitizen.tools/Ships
2. Click on 'Manufacturers' on the TOC
3. The page jumps to either 'Exploration', 'Cargo', or 'Combat', will be different every time you click on the link

Expected Behavior

The page jumps to the correct section, 'Manufacturers'

System

Tried on Firefox 110.

[alistair3149]

I am unable to reproduce the same issue on Firefox. What was the OS and the window size of the browser?

[williamsp]

On Windows 7 with screen resolution of 1600x900.

[dsestero]

Confirm bug on Firefox 111.0 on Ubuntu Linux. Thankyou for this beautiful skin.

[Vetpetmon]

Confirmed replication on Ubuntu 22.04 Firefox 113.0.1 (64-bit). Screen resolution: 1920x1080 (16:9)

Specifically, trying to navigate via the TOC from the top of the page produces the bug, not from any other position in an article.

[saramartin73]

Confirmed replication on Windows 10 Firefox 113.0.2 (64 bit).

[alistair3149]

I can finally reproduce this issue now. The root cause seems to be related to how Firefox handles CSS smooth scrolling. I might just switch over to a Javascript smooth scroll solution for the table of content instead of using a CSS one, hopefully that will resolve the issue. Though I don't have an ETA for now since my development MediaWiki setup is broken at the moment so I can't do anything complex, I will look into it later afterwards.

For now, you can fix the issue by disabling smooth scrolling. Put this in MediaWiki:Citizen.css:

@media ( min-width: @width-breakpoint-tablet ) {
    html.citizen-animations-ready {
        scroll-behavior: auto;
    }
}

[Vetpetmon]

Even with the workaround deployed on my server, the page still jumps to the wrong position in the TOC. It's just no longer smooth with the scrolling transition.

[awaitlink]

Can reproduce this at https://starcitizen.tools/Ships on macOS 14.1.2 (23B92), M2, with:

• Firefox 120.0.1 (64-bit)

while these browsers jump to the correct section:

• Chrome 120.0.6099.62 (Official Build) (arm64)
• Safari 17.1.2 (19616.2.9.11.12)

---

Additionally, there appears to be an issue with jumping to references, where clicking on a reference will sometimes scroll a very short amount and stop (instead of continuing to scroll to the reference).

I can't seem to reproduce it on https://starcitizen.tools, but can reproduce on https://signal.miraheze.org/wiki/Resources, https://signal.miraheze.org/wiki/List_of_features.

Weirdly, while this issue also isn't reproducible in Safari, it is reproducible in Chrome, and seemingly more consistently than in Firefox.

Yet, I believe the root cause for the issue may be the same, because setting scroll-behavior: auto as suggested in https://github.com/StarCitizenTools/mediawiki-skins-Citizen/issues/602#issuecomment-1579596538 (via DevTools) resolves the issue (at the cost of smooth animations, which become simple jumps).

The video shows the issue with two references, after which the third reference works as expected (so the issue isn't always reproducible):

https://github.com/StarCitizenTools/mediawiki-skins-Citizen/assets/19972511/4f7e9f3c-0f96-46c8-ab9b-b01a5a6e525d

---

Versions:

Star Citizen Wiki:

• Citizen 2.8.5
• MediaWiki 1.39.5

Signal Wiki:

• Citizen 2.8.3 (201a38f) 21:41, October 26, 2023
• MediaWiki 1.40.1 (4d7ff4b) 02:00, December 7, 2023

[alistair3149]

Should be fixed for a while. Please feel free to reopen the issue if this is reproducible again.