{"record":{"id":"10d04ea9a974b582","repo":"withastro/astro","slug":"transitions-all-view-transition-animations-inc","errorCode":null,"errorMessage":"[transitions]: all view transition animations, including fallback animation, are disabled as this device has the prefer-reduced-motion setting enabled.","messagePattern":"\\[transitions\\]: all view transition animations, including fallback animation, are disabled as this device has the prefer-reduced-motion setting enabled\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"info","filePath":"packages/astro/components/ClientRouter.astro","lineNumber":58,"sourceCode":"\t\t\treturn el.getAttribute('content') as Fallback;\n\t\t}\n\t\treturn 'animate';\n\t}\n\n\tfunction isReloadEl(el: HTMLElement | SVGAElement): boolean {\n\t\treturn el.dataset.astroReload !== undefined;\n\t}\n\n\tconst leavesWindow = (ev: MouseEvent) =>\n\t\t(ev.button && ev.button !== 0) || // left clicks only\n\t\tev.metaKey || // new tab (mac)\n\t\tev.ctrlKey || // new tab (windows)\n\t\tev.altKey || // download\n\t\tev.shiftKey; // new window\n\n\tif (supportsViewTransitions || getFallback() !== 'none') {\n\t\tif (import.meta.env.DEV && window.matchMedia('(prefers-reduced-motion)').matches) {\n\t\t\tconsole.warn(\n\t\t\t\t`[transitions]: all view transition animations, including fallback animation, are disabled as this device has the prefer-reduced-motion setting enabled.`,\n\t\t\t);\n\t\t}\n\t\tdocument.addEventListener('click', (ev) => {\n\t\t\tlet link = ev.target;\n\n\t\t\tlastClickedElementLeavingWindow = leavesWindow(ev) ? link : null;\n\n\t\t\tif (ev.composed) {\n\t\t\t\tlink = ev.composedPath()[0];\n\t\t\t}\n\t\t\tif (link instanceof Element) {\n\t\t\t\tlink = link.closest('a, area');\n\t\t\t}\n\t\t\tif (\n\t\t\t\t!(link instanceof HTMLAnchorElement) &&\n\t\t\t\t!(link instanceof SVGAElement) &&\n\t\t\t\t!(link instanceof HTMLAreaElement)","sourceCodeStart":40,"sourceCodeEnd":76,"githubUrl":"https://github.com/withastro/astro/blob/52e6c34790cc8ac4e69e6135ace06049867e5c4a/packages/astro/components/ClientRouter.astro#L40-L76","documentation":"On load, Astro's ClientRouter (View Transitions) checks `window.matchMedia('(prefers-reduced-motion)').matches`; in dev (`import.meta.env.DEV`) it console.warns that all view transition animations — including the fallback animation for browsers without native view transitions — are disabled (packages/astro/components/ClientRouter.astro:58). This is by design: honoring the user's OS-level reduced-motion setting is an accessibility requirement, and ClientRouter suppresses animated transitions entirely for those users, falling back to instant navigation. The warn exists only so developers testing in dev don't mistake the missing animation for a bug.","triggerScenarios":"Running `astro dev` on a machine where the OS 'reduce motion' accessibility setting is enabled (macOS: System Settings → Accessibility → Display → Reduce motion; Windows: Ease of Access → Show animations off; iOS/Android equivalents), then loading any page that includes `<ClientRouter />`. It only warns in dev; production builds never log it, and in both dev and prod the animations are actually disabled for that user.","commonSituations":"A developer with reduced motion enabled at the OS level (common for accessibility reasons or vestibular disorders) wonders why view transitions and fallback animations never play in dev; headless/browser-automation environments where the prefers-reduced-motion media feature is emulated as 'reduce' (Playwright/Puppeteer default emulation or a leaked DevTools setting); testing on a device with battery-saver-driven motion reduction.","solutions":["No code fix is needed — this is expected, correct behavior; do not attempt to override the user's reduced-motion preference.","To test animations locally, disable the OS reduced-motion setting (macOS: System Settings → Accessibility → Display → uncheck 'Reduce motion') or in Chrome DevTools → Rendering → Emulate CSS media feature prefers-reduced-motion: no-preference.","If you build custom per-transition animations, gate them on the same media query (`@media (prefers-reduced-motion: no-preference)`) so your own effects respect the setting like ClientRouter does."],"exampleFix":"/* before: custom transition ignores user preference */\n::view-transition-old(root) { animation: slide-out 300ms; }\n\n/* after: honor reduced motion like ClientRouter does */\n@media (prefers-reduced-motion: no-preference) {\n  ::view-transition-old(root) { animation: slide-out 300ms; }\n}","handlingStrategy":"validation","validationCode":"// mirror ClientRouter's own check before relying on animated transitions\nconst prefersReducedMotion =\n  typeof window !== 'undefined' &&\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches;\nif (prefersReducedMotion) {\n  // skip/short-circuit any custom transition orchestration\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Never treat missing view transition animations in dev as a bug without first checking the OS 'reduce motion' setting — ClientRouter intentionally disables them for those users.","When testing transitions, set Chrome DevTools → Rendering → 'Emulate CSS media feature prefers-reduced-motion' to no-preference instead of hacking the component.","Gate every custom animation (CSS or JS-driven) behind `@media (prefers-reduced-motion: no-preference)` / a matchMedia check so your app matches ClientRouter's accessibility behavior."],"tags":["view-transitions","accessibility","reduced-motion","clientrouter","dev-only-warning"],"backgroundTag":"prefers-reduced-motion","analyzedSha":"52e6c34790cc8ac4e69e6135ace06049867e5c4a","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":"2026-08-18T18:48:03.901Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}