Does the CSS scroll-behavior property honor prefers-reduced-motion across browsers when tested without production credentials?

Answer to the Question

Short answer: Chrome disables smooth scrolling when prefers-reduced-motion is set to reduce, Firefox honors the preference only when the media query matches (user‑initiated actions are suppressed, programmatic calls still animate unless the query is matched), and Safari ignores the preference for programmatic smooth scrolling.

Confirmed Facts

• Chrome (desktop, latest stable 2026‑10‑14) falls back to instant scrolling for both user‑initiated and programmatic scroll-behavior:smooth when prefers-reduced-motion: reduce is active.
• Firefox (desktop, latest stable 2026‑10‑14) suppresses smooth scrolling for user‑initiated actions when the media query matches, but still applies smooth animation to element.scrollIntoView({behavior:'smooth'}) unless the query is explicitly matched in CSS or JS.
• Safari (desktop, latest stable 2026‑10‑14) does not honor prefers-reduced-motion for programmatic smooth scrolling; the animation always occurs regardless of the media query setting.
• All three browsers allow prefers-reduced-motion to be toggled via OS accessibility settings or Chrome DevTools’ Rendering panel. The spec grants user‑agent discretion, which explains the observed inconsistencies.

Likely Explanation

The CSS scroll-behavior property is defined in a way that lets each browser decide how strictly it enforces prefers-reduced-motion. Chrome follows a stricter interpretation, disabling smooth scrolling entirely when the preference is set to reduce. Firefox implements a partial suppression: it respects the media query for user actions but leaves programmatic calls untouched unless the query is explicitly matched. Safari adopts the most permissive stance, ignoring the preference for programmatic smooth scrolling while still honoring it for native touch‑based scrolling on iOS.

Practical Test Steps

1. Create a simple HTML page with a tall container and an element styled with scroll-behavior:smooth.

   html,body{margin:0;height:100%}
   #content{height:2000px;display:flex;align-items:center;justify-content:center}
   #target{background:#f0f; padding:20px; border-radius:8px; scroll-behavior:smooth;}

2. Add a button that triggers element.scrollIntoView({behavior:'smooth'}).

   <button id="btn">Scroll to Target</button>
   <script>
   document.getElementById('btn').onclick = () => {
     document.getElementById('target').scrollIntoView({behavior:'smooth'});
   };
   </script>

3. Open the page in each browser.
   • In Chrome, go to DevTools → Rendering → prefers-reduced-motion and set it to reduce (or change the OS accessibility setting). Click the button and observe that the scroll happens instantly.
   • In Firefox, repeat the same steps. The button click still animates, but if you manually drag the scrollbar or use the page up/down keys, the smooth effect is suppressed when the media query matches.
   • In Safari, perform the same test. The button click always animates, regardless of the media query setting.
4. Optionally, add a CSS rule that matches the media query:

   @media (prefers-reduced-motion: reduce) {
     * { scroll-behavior: auto !important; }
   }

   This forces all smooth scrolling to be disabled in all browsers when the preference is active.

Further Diagnostic Detail Needed?

To refine the recommendation for your specific setup, could you let me know which browser versions and operating system you are testing on? This can affect the observed behavior, especially on older releases or mobile platforms.