A Honeypot Ruined My Arabic Pages

Convertica runs in seven languages. Six read left-to-right. Arabic reads right-to-left. That mismatch cost me hours of debugging.

Every Arabic page looked fine in my browser. Then I ran Lighthouse. The screenshot came back blank—pure white, not broken or half-loaded.

The URL and HTML were unchanged. Chrome displayed the page, but Headless Chrome showed nothing. Bots from Google and Bing use headless browsers, so this mattered.

The culprit was a spam honeypot. I added a hidden input to catch bots and placed it far outside the viewport:

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

In left-to-right documents the browser clips the overflow, so the honeypot sits in dead space.

When I set dir="rtl", the scroll origin jumps to the right edge. The left overflow becomes real space, stretching the document to ten thousand pixels wide while the content stays bunched on the far right.

My browser automatically scrolled to the right origin, so I saw nothing wrong. A headless renderer starts at the far-left corner and rendered nine thousand pixels of nothing.

Fix it with a single property change.

Replace left with inset-inline-start.

  • Old: position: absolute; left: -9999px;
  • New: position: absolute; inset-inline-start: -9999px;

inset-inline-start follows the writing direction—acting as left in LTR and right in RTL—keeping the honeypot off-screen on the correct side.

Audit your old off-screen hacks when you add RTL support. That includes honeypots, skip links, and hidden divs. Swap left/right for logical properties.

Your browser is a poor test for this bug; it hides the failure by scrolling for you. Render the page headlessly to see the actual pixels.

If one language stops getting impressions while others stay fine, check your renderer.

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