Un honeypot arruinó mis páginas en árabe

Convertica funciona en siete idiomas. Seis se leen de izquierda a derecha. El árabe se lee de derecha a izquierda. Esa discrepancia me costó horas de depuración.

Cada página en árabe se veía bien en mi navegador. Luego ejecuté Lighthouse. La captura de pantalla resultó estar en blanco: totalmente blanca, no rota ni a medio cargar.

La URL y el HTML no habían cambiado. Chrome mostraba la página, pero Headless Chrome no mostraba nada. Los bots de Google y Bing utilizan navegadores headless, por lo que esto era importante.

El culpable fue un honeypot de spam. Añadí un input oculto para capturar bots y lo coloqué muy fuera del viewport:

  • position: absolute
  • left: -9999px
  • opacity: 0

En documentos de izquierda a derecha, el navegador recorta el desbordamiento, por lo que el honeypot queda en un espacio muerto.

Cuando establecí dir="rtl", el origen del desplazamiento salta al borde derecho. El desbordamiento a la izquierda se convierte en espacio real, estirando el documento a diez mil píxeles de ancho mientras el contenido permanece agrupado en el extremo derecho.

Mi navegador se desplazaba automáticamente hacia el origen derecho, por lo que no vi nada malo. Un renderizador headless comienza en la esquina extrema izquierda y renderizó nueve mil píxeles de nada.

Soluciónalo con un solo cambio de propiedad.

Reemplaza left con inset-inline-start.

  • Antiguo: position: absolute; left: -9999px;
  • Nuevo: position: absolute; inset-inline-start: -9999px;

inset-inline-start sigue la dirección de escritura —actuando como left en LTR y como right en RTL— manteniendo el honeypot fuera de la pantalla en el lado correcto.

Audita tus antiguos trucos para elementos fuera de pantalla cuando añadas soporte para RTL. Esto incluye honeypots, enlaces de salto y divs ocultos. Cambia left/right por propiedades lógicas.

Tu navegador es una mala prueba para este error; oculta el fallo desplazándose por ti. Renderiza la página de forma headless para ver los píxeles reales.

Si un idioma deja de recibir impresiones mientras los demás siguen bien, comprueba tu renderizador.

Fuente: https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji