Planteamiento y contexto
Una herramienta de diseño debe hacer zoom en su lienzo mientras mantiene la barra de herramientas fija en el diseño. Compara CSS zoom y transform: scale() en cuanto a diseño (layout), desbordamiento, coordenadas de eventos y accesibilidad, y luego explica cómo depurarías el zoom anidado.
Qué evalúa el entrevistador
- Distinguir el zoom que afecta el layout de una transformación que solo afecta el dibujado (paint).
- Manejar contenedores con desplazamiento (scroll), coordenadas del puntero, foco, zoom del navegador y zoom anidado.
- Validar la elección en escenarios reales en lugar de elegir basándose en una captura de pantalla.
Preguntas para aclarar primero
- ¿El objetivo es contenido de página ordinario, un lienzo editable o una vista previa de solo lectura?
- ¿El zoom debe cambiar el espacio de layout, el rango de scroll y las regiones de impacto (hit regions)?
- ¿Debe admitir navegación por teclado, lectores de pantalla, zoom del navegador y alto contraste?
Una respuesta de 30 segundos
Si el zoom debe cambiar el espacio de layout y scroll, evaluaría CSS zoom. Si es solo un cambio visual y los elementos hermanos deben permanecer en su lugar, consideraría transform: scale() y manejaría el origen de la transformación, las pruebas de impacto (hit testing) y el desplazamiento explícitamente. zoom afecta el layout; scale() no desencadena el recálculo del layout. currentCSSZoom puede exponer el producto efectivo de los valores de CSS zoom anidados, mientras que el zoom del navegador y las transformaciones siguen siendo mediciones independientes.
Análisis detallado paso a paso
1. Definir la semántica del zoom
El zoom de legibilidad de la página debe utilizar los controles del navegador y del sistema en lugar de reemplazar la configuración del usuario con CSS. Un editor de lienzo necesita una escala de aplicación y una conversión explícita entre las coordenadas del lienzo y del viewport; no combines ambos estados.
2. Comprender el efecto de zoom en el layout
CSS zoom amplía el elemento objetivo y afecta el layout de la página, por lo que las posiciones de los hermanos, los cálculos de tamaño y el rango de desbordamiento pueden cambiar. Es adecuado para contenido que debe ocupar el espacio de layout correspondiente, pero se deben probar los anchos mínimos y el comportamiento de las barras de desplazamiento.
3. Comprender el efecto de transform: scale en el dibujado
transform: scale() cambia el dibujado y el límite visual transformado sin provocar el reflujo (reflow) de los hermanos. Se adapta a vistas previas o layouts externos estables, pero transform-origin y las conversiones entre coordenadas visuales y de eventos deben ser explícitas.
4. Mantener claro el límite del código
.preview-zoom {
zoom: var(--preview-zoom, 1);
}
.canvas-visual {
transform: scale(var(--canvas-scale, 1));
transform-origin: top left;
}No apiles accidentalmente ambas proporciones en un mismo componente. Mantén el estado de escala cerca del controlador del lienzo y decide por separado si la barra de herramientas o el contenido del lienzo lo heredan; un zoom en la raíz no debería cambiar inesperadamente el tamaño de la navegación y los cuadros de diálogo.
5. Manejar coordenadas, foco y desplazamiento
Usa getBoundingClientRect(), las coordenadas del puntero y los desplazamientos de scroll para derivar la transformación, y luego verifica en los navegadores objetivo. Los anillos de foco, los controles de arrastre y la navegación por teclado deben permanecer visibles; el escalado visual con transform no amplía automáticamente el área de scroll del contenedor.
6. Depurar el zoom anidado
Element.currentCSSZoom informa el producto efectivo de CSS zoom en el elemento y sus ancestros. Ayuda a los registros y herramientas de depuración a explicar por qué el contenido aparece ampliado varias veces. No es una lectura combinada del zoom de página del navegador ni del escalado con transform; registra esos valores por separado.
7. Ejecutar comprobaciones de accesibilidad y rendimiento
Prueba el zoom del navegador, las preferencias de fuentes del sistema, la operación mediante teclado, el orden para lectores de pantalla, el alto contraste y el movimiento reducido. Los cambios de zoom grandes o frecuentes pueden aumentar el costo de layout y dibujado; aplica throttling a las vistas previas de los controles deslizantes y guarda el valor exacto al soltarlos.
Respuesta modelo
Primero decidiría si el zoom debe cambiar el espacio de layout. Si debe cambiar el scroll y las posiciones de los hermanos, evaluaría zoom; si el lienzo debe crecer visualmente mientras la barra de herramientas permanece en su lugar, usaría transform: scale() y manejaría el origen, el scroll y las coordenadas del puntero. El estado del lienzo no debería cambiar el zoom de página del navegador ni hacer que los cuadros de diálogo hereden una proporción accidental. Usaría currentCSSZoom para depurar el CSS zoom anidado, pero registrando las transformaciones y el zoom de página por separado, y luego probaría el foco del teclado, lectores de pantalla, desplazamiento, DPI, rendimiento y dispositivos móviles.
Errores comunes
- Asumir que
zoomyscale()solo cambian el tamaño visual. - Esperar que el escalado con transform expanda el layout y el rango de scroll automáticamente.
- Colocar una proporción de escala del lienzo en la raíz y escalar la barra de herramientas, los cuadros de diálogo y la navegación.
- Ignorar la conversión de coordenadas del puntero y la visibilidad del foco tras el escalado.
- Tratar currentCSSZoom como un total que incluye transformaciones o el zoom de página del navegador.
Preguntas de seguimiento y respuestas
¿Cuándo se debe evitar CSS zoom?
Usa los controles del navegador y del sistema para la legibilidad del usuario. Cuando la matriz del navegador o los efectos secundarios en el layout sean inaceptables, utiliza un layout normal, container queries o una transformación de coordenadas de la aplicación.
¿Qué pasa si el límite visual transformado excede el contenedor?
Define el recorte (clipping) y el desplazamiento deliberadamente, mide el límite transformado y mantén visibles el foco y los controles de arrastre. No ocultes el problema solo con overflow: hidden.
¿Por qué se desvían las coordenadas del puntero?
Las coordenadas de eventos suelen ser relativas al viewport, mientras que las coordenadas del lienzo deben restar el scroll y la traslación, y dividirse por la escala de la aplicación. Coloca la conversión en una única función probada y cubre diferentes orígenes de transformación.
¿Cómo se controla el zoom anidado?
Limita el alcance, centraliza el estado de la escala, registra cada capa y currentCSSZoom, y evita que los componentes multipliquen una proporción sin conocer el estado de sus ancestros.
¿Cómo se prueba el zoom de página del navegador?
Al 100%, 125% y 200%, verifica el reflujo (reflow), el orden de navegación por teclado, los truncamientos y el desplazamiento horizontal. Mantén el zoom de página y el zoom del lienzo de la aplicación como dimensiones de aceptación independientes.
¿Cómo cuantificas la elección en una entrevista?
Compara el movimiento de layout, el rango de scroll, el margen de error de hit-testing, la visibilidad del foco, el tiempo por cuadro (frame time) y la latencia de entrada en los dispositivos de destino, y luego elige la propiedad que coincida con la semántica del producto.