cloudflare
[Firefox on Windows 10] TOC links don't fully scroll to section
When I click on a link in the table of contents, say on this page: https://workers.cloudflaredocs.workers.dev/learning/getting-started
It doesn't fully scroll to the section I selected. To get to "7. Publish your project" I had to click the TOC link four or five times, each time taking me a bit further down the page.
I'm running the latest Firefox on Windows 10.
I just tried Chrome and see very different behaviour. In Chrome it smoothly scrolls right to the section. Firefox "jumps" rather than scrolls and doesn't go far enough.
@alankemp Or anyone else able to test Firefox on Windows 10/Linux:
I have a suspicion that this has to do with the native CSS scroll-behavior: smooth being applied.
To test this, I’d love folk’s help. If you set prefers-reduced-motion: reduce in your operating system or in your browser, that will prevent this CSS from being applied. With this off, if the issue goes away, that could suggest that this may be a browser bug in Firefox’s implementation of scroll-behavior: smooth. If the issue persists, that would be surprising to me, but it would also be very helpful for further debugging.
According to this article, Firefox gets this preference from Windows directly:
By making CSS animation conditional on prefers-reduced-motion, websites can respect a user’s operating system animation setting. In Windows 10, that setting is Windows Settings > Ease of Access > Display > Show animations in Windows.
In iOS 12, you unintuitively turn on two switches to turn off animation: Settings > Safari > Advanced > Experimental Features > Web Animations and CSS Integration and Web Animations.
Let me know. :)
I can confirm on Linux, setting ui.prefersReducedMotion to 1 in about:config fixes it.
Yes, confirmed on Windows 10 as well. Setting Windows Settings > Ease of Access > Display > Show animations in Windows to false makes it snap immediatly to the section.