Debugging de View Transitions en móviles#

Las View Transitions API pueden funcionar perfectamente en desktop y fallar sin warning en móviles. El culpable casi siempre es el soporte de navegador o el prefers-reduced-motion. Acá va el sistema de debugging que uso.

Feature Detection Primero#

Antes de implementar transiciones, verificá el soporte real del navegador:

src/utils/view-transitions.ts

export function supportsViewTransitions(): boolean {
  const hasAPI = "startViewTransition" in document;
  const reducedMotion = window.matchMedia(
    "(prefers-reduced-motion: reduce)",
  ).matches;

  console.log("[VT] API support:", hasAPI);
  console.log("[VT] Reduced motion:", reducedMotion);

  return hasAPI && !reducedMotion;
}

Chrome Remote Debugging#

Para ver qué pasa realmente en el dispositivo:

Conectá el móvil por USB
Abrí chrome://inspect/#devices en desktop
Navegá a tu sitio en el móvil
Inspeccioná desde el panel de desktop

Console logging estratégico

document.startViewTransition?.(() => {
  console.log("[VT] Transition started");
  // ... update DOM
}) ?? console.warn("[VT] No soportado en este navegador");

Fallback Graceful#

Si no hay soporte, el cambio debe ser instantáneo pero funcional:

src/components/ViewTransition.astro

---
const supported = typeof Astro.request !== 'undefined';
---

<script>
  if (!document.startViewTransition) {
    document.documentElement.classList.add('no-view-transitions');
  }
</script>

<style>
  .no-view-transitions .page-transition {
    transition: none !important;
  }
</style>

View Transitions en móviles

Pros

API nativa: Sin JavaScript adicional para animaciones
Performance: 60fps garantizados por el navegador
Progressive: Degrada gracefully sin soporte

Cons

Safari: Soporte reciente (iOS 18.2+)
Debugging: Difícil sin remote debugging
Reduced motion: Debe respetarse obligatoriamente

Debugging de View Transitions en móviles#

Feature Detection Primero#

Chrome Remote Debugging#

Fallback Graceful#

View Transitions en móviles

Pros

Cons

Referencias#