El error invisible que rompe tus View Transitions en CSS ⚠️
Pasé un sábado entero peleando con el código para descubrir que el problema no era mi lógica, sino la documentación obsoleta. Muchos ingenieros estamos intentando implementar Cross-Document View Transitions para lograr
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
desarrollo frontend
Fuente
dev.to
Puntos clave
- Pasé un sábado entero peleando con el código para descubrir que el problema no era mi lógica, sino la documentación obsoleta.
- Muchos ingenieros estamos intentando implementar Cross-Document View Transitions para lograr esa sensación de App Nativa en sitios multi-página (MPA) sin usar frameworks pesados. Pero aquí está la trampa: la mayoría de l
- El ecosistema de documentación se movió más rápido que los posts, y eso nos está costando horas de debugging.
- Aquí los 3 'gotchas' técnicos que debes conocer para que realmente funcionen:
Bloque 1
Pasé un sábado entero peleando con el código para descubrir que el problema no era mi lógica, sino la documentación obsoleta.
Muchos ingenieros estamos intentando implementar Cross-Document View Transitions para lograr esa sensación de App Nativa en sitios multi-página (MPA) sin usar frameworks pesados. Pero aquí está la trampa: la mayoría de los tutoriales que rankean en Google están mal.
Bloque 2
El ecosistema de documentación se movió más rápido que los posts, y eso nos está costando horas de debugging.
Aquí los 3 'gotchas' técnicos que debes conocer para que realmente funcionen:
Bloque 3
• El Meta Tag ha muerto: Olvida el ` `. Ahora el opt-in es exclusivamente vía CSS con `@view-transition { navigation: auto; }`. Si usas el meta tag, el navegador simplemente lo ignora sin lanzar errores.
• El Timeout Silencioso: Existe un límite estricto de 4 segundos. Si la nueva página no es "renderizable" en ese tiempo (por un render-blocking image o un API call lento), la transición muere y el navegador hace un salto brusco. La solución es usar ` ` para indicarle al browser qué elemento es crítico.
Bloque 4
• El Efecto Taffy: Las imágenes se deforman porque el navegador no transiciona el elemento ` `, sino capturas rasterizadas. Para evitar que tus fotos parezcan chicle, debes aplicar `object-fit: cover` directamente a los pseudo-elementos `::view-transition-old` y `::view-transition-new`.
La arquitectura web está evolucionando hacia capacidades que antes requerían React o Astro, pero el precio es que el spec es un blanco móvil.
Bloque 5
No culpes a tu código antes de revisar si estás siguiendo una norma que ya fue deprecada.
¿Ustedes cómo están manejando la consistencia visual en sus transiciones entre páginas sin recurrir a frameworks de cliente?