devopsandClaude Sonnet 5
ccaddf546c
Reportado en vivo por el usuario: la foto principal (y el modal de zoom interactivo) se ven borrosas en mobile, especificamente en Chrome y Edge de Android. Investigado a fondo antes de tocar nada: no es un archivo corrupto ni un problema de nuestro cache/backend -- confirmado con fetch()+createImageBitmap() (que evita <img>/srcset por completo) que el archivo real decodifica perfecto a resolución completa (1200x1200). El bug está en cómo Chromium elige el candidato del srcset con sizes="100vw" + fill a DPR alto (2.6+, cualquier Android real): currentSrc reporta la URL de un candidato grande, pero naturalWidth/Height terminan reflejando un candidato mucho más chico -- reproducido igual en Chromium headless, y consistente con lo reportado en Chrome y Edge Android reales (mismo motor). No hay forma de arreglar el algoritmo de selección de Chromium desde acá. La foto principal y el modal de zoom pasan a unoptimized: al quedar un solo recurso real por foto (sin candidatos de por medio), no hay entre qué elegir mal. Costo: la foto pesa el archivo completo en vez de una versión redimensionada -- aceptable para dos imágenes puntuales donde la nitidez importa. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV
ARI Shopping Headless Storefront v4.1
Actualización enfocada en UX, interactividad y rendimiento sobre Next.js 15.5.10.
Correcciones principales
- Encabezado blanco premium con acentos cyan, violeta, fucsia y navegación negra.
- Imágenes promocionales sin
opacity,mix-blendni filtros de color. - Menú principal funcional mediante Drawer accesible de Radix UI.
- Cuenta y favoritos funcionales.
- Carrusel con flechas, teclado, scroll suave y
scroll-snap. - Zoom real de producto entre 100% y 300%, rueda, botones, doble clic y arrastre.
- Thumbnails WebP dedicados para tarjetas, búsqueda, carrito y favoritos.
- Recursos originales recomprimidos y caché HTTP para
/images. next/imageen modounoptimizedporque los recursos ya vienen procesados; evita latencia del optimizador durante la primera visita.- Menos componentes animados con JavaScript; las tarjetas usan transiciones CSS.
content-visibilitypara contenido fuera de pantalla.- Pantalla
loading.tsxpara transiciones de ruta.
Validación
npm ci
npm run typecheck
npm run build
Flujo
Gitea → Gitea Actions → Registry → actualización de frontend.yaml → Argo CD → Kubernetes.