The conflict between smooth scrolling and find-on-page

When the v17 design of CSS-Tricks shipped (the site is on v18 now), the stylesheet included html { scroll-behavior: smooth; }. Reader feedback arrived quickly: using Ctrl+F or Cmd+F no longer snapped to a match but scrolled slowly toward it, which readers who rely on the shortcut found slower and less usable. The declaration was removed shortly after, since there was almost no control over how the browser applied it.

The technique still circulates as a "CSS tip," and my experience with it drew a response from Christian Schaefer:

You could try fix it with

html:focus-within {
scroll-behavior: smooth;
}

— Christian Schaefer (@derSchepp) January 5, 2021

He also blogged it. The gist: smooth scrolling applies to everything in Chromium, including movement between the browser's page-search results, and an exception would be the desirable behavior. Until the Chromium team addresses it, the workaround needs a bit of extra CSS and HTML.

Whether any browser would class the current behavior as a bug is unclear, and it is unlikely to be specced at all, since find-on-page isn't really a web technology feature. Either way, find-on-page is preferable without smooth scrolling.

Anecdotal thing: when I had this on @CSS, I had SO MANY reports of people annoyed that when they did "find on page" and ⬆️⬇️ through the results, the smooth scrolling was slow and annoying. Unfortunately, you can't control the speed or when it happens. https://t.co/HAio46bYQt

— Chris Coyier (@chriscoyier) January 5, 2021
html:focus-within {
  scroll-behavior: smooth;
}

Where the workaround falls short

It mostly works. The problem shows up in cases like this:

<a href="#link-down-the-page">Jump down</a>

...

<h2 id="link-down-the-page">Header</h2>

That will jump the page down. With scroll-behavior: smooth; generally in effect, that jump is a nice affordance. But <h2> is typically not a focusable element, so once the trick above runs there is no focus inside <html> at all, and the smooth scrolling is lost. Preserving it requires this:

<h2 tabindex="-1" id="link-down-the-page">Header</h2>