Honeypot испортил мои арабские страницы

Convertica работает на семи языках. Шесть из них читаются слева направо. Арабский — справа налево. Это несоответствие стоило мне часов отладки.

В браузере каждая арабская страница выглядела нормально. Но когда я запустил Lighthouse, скриншот оказался пустым — просто белый экран, без ошибок или недогруженного контента.

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

Виновником оказалась спам-ловушка (honeypot). Я добавил скрытый input, чтобы ловить ботов, и вынес его далеко за пределы области просмотра (viewport):

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

В документах с направлением слева направо (LTR) браузер обрезает переполнение, поэтому honeypot оказывается в «мертвой зоне».

Когда я установил dir="rtl", точка начала прокрутки переместилась на правый край. Переполнение слева стало реальным пространством, растянув документ до десяти тысяч пикселей в ширину, в то время как контент остался сгруппированным на самом правом краю.

Мой браузер автоматически прокручивал страницу к правой точке начала отсчета, поэтому я не видел ничего подозрительного. 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 на логические свойства (logical properties).

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

Если по одному языку перестали идти показы, в то время как по остальным всё в порядке, проверьте свой рендерер.

Источник: https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji