How to Inspect CSS @media (prefers-reduced-motion) and Transition Timing in Safari Web Inspector

Modern accessibility standards (WCAG 2.2 Success Criterion 2.3.3) require web applications to respect user preferences regarding vestibular motion triggers, parallax scrolling, and animated interface transitions. Apple operating systems allow users to activate system-wide motion reduction via Accessibility settings. The CSS prefers-reduced-motion media query enables web developers to detect this setting and deactivate disruptive animations. Safari Web Inspector provides built-in media query emulation controls and a dedicated Timelines panel to inspect and validate non-disruptive transitions.

Understanding prefers-reduced-motion Values

The prefers-reduced-motion media feature queries whether the user has requested the operating system to minimise non-essential motion:

• no-preference: Indicates that the operating system has not requested reduced motion. Rich transitions, keyframe animations, and parallax effects can execute normally.
• reduce: Indicates that the user has enabled motion reduction in system preferences. Animations that convey movement, spatial rotation, zooming, or continuous pulsing must be substituted with instantaneous cuts, subtle cross-fades, or static presentations.

Implementing Accessible Animations with CSS Custom Properties

Architect robust, maintainable animation frameworks by declaring animation durations as CSS custom properties conditioned on prefers-reduced-motion:

:root {
    --transition-duration-fast: 150ms;
    --transition-duration-standard: 300ms;
    --animation-easing: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Deactivate or shorten transitions when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-duration-fast: 0.001ms;
        --transition-duration-standard: 0.001ms;
    }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

.modal-dialog {
    transition: transform var(--transition-duration-standard) var(--animation-easing),
                opacity var(--transition-duration-standard) ease-in-out;
}

Emulating Reduced Motion in Safari Web Inspector

Testing motion reduction on macOS previously required toggling system preferences in macOS System Settings. Safari Web Inspector provides a direct per-tab emulation toggle:

1. Open Safari and navigate to your animated web application.
2. Open Web Inspector by pressing Option+Command+I (or right-click and choose Inspect Element).
3. Click the Graphics & Rendering icon (or open the Elements tab and select the Styles sub-tab).
4. Locate the Media Overrides section in the inspector toolbar.
5. Click the Prefers Reduced Motion dropdown and select reduce.
6. Interact with buttons, dropdowns, and modal dialogs on your page. Observe that sliding animations and rotational transitions immediately revert to instantaneous opacity transitions or static layouts.
7. Switch the override to no-preference to verify that standard smooth animations resume without page reload.

Inspecting Keyframe Timings in the Timelines Tab

To inspect whether animations comply with WCAG threshold frequencies and do not flash more than three times per second:

1. Navigate to the Timelines tab in Safari Web Inspector.
2. Tick Rendering & Painting and click the Record button.
3. Trigger the UI animation or modal popup, then stop the recording.
4. Inspect the Frames timeline to verify that animation frames maintain steady 60fps or 120fps refresh rates without layout thrashing or long composite delays.