Honeypot зіпсував мої арабські сторінки

Convertica працює на семи мовах. Шість із них читаються зліва направо. Арабська — справа наліво. Ця невідповідність коштувала мені годин налагодження.

Кожна арабська сторінка виглядала нормально у моєму браузері. Потім я запустив Lighthouse. Скриншот прийшов порожній — чисто білий, не зламаний і не напівзавантажений.

URL та HTML залишилися незмінними. Chrome відображав сторінку, але Headless Chrome не показував нічого. Боти від Google та Bing використовують headless-браузери, тому це мало значення.

Винуватцем був спам-honeypot. Я додав приховане поле (input), щоб ловити ботів, і розмістив його далеко за межами області перегляду (viewport):

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

У документах із напрямком зліва направо браузер обрізає overflow, тому honeypot опиняється в порожньому просторі.

Коли я встановив dir="rtl", точка відліку прокрутки перемістилася на правий край. Overflow зліва став реальним простором, розтягнувши документ до десяти тисяч пікселів завширшки, тоді як контент залишається згрупованим на самому правому краї.

Мій браузер автоматично прокрутив сторінку до правої точки відліку, тому я не помітив нічого підозрілого. Headless-рендерер починає з крайнього лівого кута і відрендерив дев'ять тисяч пікселів порожнечі.

Виправте це за допомогою зміни лише однієї властивості.

Замініть left на inset-inline-start.

  • Старе: position: absolute; left: -9999px;
  • Нове: position: absolute; inset-inline-start: -9999px;

inset-inline-start підлаштовується під напрямок письма — працюючи як left у LTR та як right у RTL — що дозволяє тримати honeypot за межами екрана з правильного боку.

Перевірте свої старі хаки для винесення елементів за межі екрана, коли додаєте підтримку RTL. Це стосується honeypot-полів, skip links та прихованих div-ів. Замініть left/right на логічні властивості.

Ваш браузер — поганий інструмент для тестування цього багу; він приховує помилку, прокручуючи сторінку за вас. Рендеривте сторінку в headless-режимі, щоб побачити реальні пікселі.

Якщо одна мова перестає отримувати покази, тоді як інші залишаються в нормі, перевірте свій рендерер.

Джерело: https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji