Safari’s Prefers‑Reduced‑Motion Bug: A Diagnostic & Fix Guide

Recognizable Condition

In Safari, UI elements that normally animate—dropdown menus, modal fade‑ins, carousel slide‑ins—stop moving or collapse into a static state. The layout may shift, causing hidden content or broken spacing. The symptom appears only when the system setting “Reduce motion” is enabled or when the @media (prefers-reduced-motion: reduce) block is active.

Underlying Cause

Safari automatically applies the prefers-reduced-motion media query to all CSS animations and transitions, even if the developer tries to override them with specific animation-duration or transition-property values. Until Safari 16.1, the engine prioritized the media query over later declarations, and !important was required to force the desired duration.

Diagnostic Table

#	Check	What to Look For
1	Open Web Inspector	Computed style shows animation-duration: 0s or transition-duration: 0s for the element.
2	Search CSS for @media (prefers-reduced-motion: reduce)	Block targets the problematic component.
3	Check Safari version	Version < 16.1 may require stricter overrides.
4	Toggle system Reduce motion setting	Re‑confirm that the issue persists only when enabled.

Ordered Checks & Fixes

1. Inspect Computed Style
   In Safari’s Web Inspector, select the element and view the Computed tab. Verify that animation-duration or transition-duration is 0s. If so, proceed to the next step.

2. Locate the Media Query
   Search the stylesheet for @media (prefers-reduced-motion: reduce) that targets the element. Note any animation-duration: 0s or transition-duration: 0s declarations.

3. Override with Specificity
   Add a more specific rule that excludes the media query, e.g.:

   /* Only apply when the user does NOT request reduced motion */
   @media (prefers-reduced-motion: no-preference) {
     .dropdown, .modal, .carousel {
       animation-duration: 0.4s !important;
       transition-duration: 0.4s !important;
     }
   }
   

   Using !important here is acceptable because it is scoped to a narrow selector and a specific media query.

4. Test with Reduced Motion Disabled
   Disable the system setting (System Preferences > Accessibility > Reduce motion) and reload the page. The animation should run normally. If it does, the override is effective.

5. Re‑enable Reduced Motion
   Re‑enable the setting and verify that the animation still runs. If it collapses again, the override was not applied correctly.

6. Fallback JavaScript (Optional)
   For critical animations that must not collapse, add a small JS shim that re‑initializes the animation when Safari detects reduced motion:

   document.addEventListener('DOMContentLoaded', () => {
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
     if (!prefersReducedMotion.matches) return;
     const elems = document.querySelectorAll('.critical-animation');
     elems.forEach(el => el.classList.add('force-animate'));
   });
   

   In CSS, define .force-animate with the desired duration and animation‑name.

Escalation Criteria

• If the override works in a minimal test page but fails in the production site, check for third‑party libraries that inject conflicting CSS.
• If the element still collapses after all overrides, file a reproducible test case in WebKit Bugzilla and tag it “safari‑prefers‑reduced‑motion”.
• As a temporary workaround for a specific user group, consider disabling the system setting via a browser‑side toggle or a user‑agent CSS injection.

Practical Verification

1. Open Safari Web Inspector, inspect the element, and confirm animation-duration is non‑zero.

2. Toggle “Reduce motion” in System Preferences, reload the page, and verify the animation still runs.

3. Run a visual regression test (e.g., Applitools, Percy) against Safari 16.x to ensure consistent UI.

4. Document the override in the project’s style guide and note the Safari version requirement.

Limitations & Maintenance Notes

• Overusing !important can create cascading issues; limit it to the narrow selector shown above.
• Safari’s handling of prefers-reduced-motion can change in minor releases; keep the test environment synchronized with the target deployment version.
• JavaScript fallbacks should be used sparingly and only for critical animations, as they add runtime overhead.

Summary

When Safari collapses UI animations under prefers-reduced-motion, the problem usually stems from the browser’s default enforcement of the media query. By locating the offending CSS, adding a specific override with !important inside a no‑preference media query, and optionally providing a JavaScript shim, you can restore the intended animation behavior. Verify the fix by toggling the system setting and using Safari’s Web Inspector. If the issue persists, report it to WebKit and consider temporary workarounds for affected users.