Honeypot zepsuł moje arabskie strony

Convertica działa w siedmiu językach. Sześć jest czytanych od lewej do prawej. Arabski jest czytany od prawej do lewej. Ta rozbieżność kosztowała mnie godziny debugowania.

Każda arabska strona wyglądała poprawnie w mojej przeglądarce. Potem uruchomiłem Lighthouse. Zrzut ekranu okazał się pusty — całkowicie biały, nie uszkodzony ani nie załadowany w połowie.

Adres URL i kod HTML pozostały bez zmian. Chrome wyświetlał stronę, ale Headless Chrome nie pokazywał niczego. Boty Google i Bing używają przeglądarek typu headless, więc miało to znaczenie.

Winowajcą był honeypot do walki ze spamem. Dodałem ukryte pole input, aby wyłapywać boty, i umieściłem je daleko poza obszarem widocznym (viewport):

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

W dokumentach czytanych od lewej do prawej przeglądarka przycina nadmiar treści (overflow), więc honeypot znajduje się w martwej strefie.

Kiedy ustawiłem dir="rtl", punkt początkowy przewijania przeskakuje na prawą krawędź. Nadmiar po lewej stronie staje się realną przestrzenią, rozciągając dokument do dziesięciu tysięcy pikseli szerokości, podczas gdy treść pozostaje skupiona po prawej stronie.

Moja przeglądarka automatycznie przewijała do prawego punktu początkowego, więc nie widziałem niczego niepokojącego. Renderer typu headless zaczyna od lewego górnego rogu i wyrenderował dziewięć tysięcy pikseli pustki.

Napraw to za pomocą zmiany jednej właściwości.

Zastąp left właściwością inset-inline-start.

  • Stare: position: absolute; left: -9999px;
  • Nowe: position: absolute; inset-inline-start: -9999px;

inset-inline-start podąża za kierunkiem pisma — działa jak left w LTR i jak right w RTL — dzięki czemu honeypot pozostaje poza ekranem po właściwej stronie.

Przejrzyj swoje stare obejścia (hacks) polegające na umieszczaniu elementów poza ekranem, gdy dodajesz obsługę RTL. Dotyczy to honeypotów, linków typu skip link oraz ukrytych divów. Zamień left/right na właściwości logiczne.

Twoja przeglądarka jest słabym narzędziem testowym dla tego błędu; ukrywa on awarię, przewijając stronę za Ciebie. Wyrenderuj stronę w trybie headless, aby zobaczyć rzeczywiste piksele.

Jeśli jeden język przestaje generować wyświetlenia, podczas gdy inne działają poprawnie, sprawdź swój renderer.

Źródło: https://dev.to/convertica/a-honeypot-field-made-every-arabic-page-on-my-site-render-blank-3aji