A honeypot field made every Arabic page on my site render blank

Convertica runs in seven languages. Six of them read left to right, and Arabic does not. That single difference cost me an embarrassing amount of debugging time.

The symptom

Every Arabic converter page looked completely normal in my browser. Then I ran Lighthouse against one of them and the screenshot came back empty. Not broken, not half painted. White.

Same URL, same server, same HTML. Fine in Chrome, blank in headless Chrome. And headless Chrome is roughly what Google, Bing and every link preview bot see.

The culprit

Sitting in the form on every converter page was a spam honeypot. An input no human should ever fill in, parked far outside the viewport:

<input type="text" name="website"
       style="position: absolute; left: -9999px; opacity: 0"
       tabindex="-1" autocomplete="off" aria-hidden="true">

This is one of the oldest tricks in the book, and it is harmless. In a left to right document.

Why direction changes everything

In an LTR document, overflow past the left edge is unreachable. The browser clips it, no scrollbar appears, nothing moves. The honeypot sits in dead space.

Set dir="rtl" and the scroll origin moves to the right edge. Now that leftward overflow is real scrollable canvas, so the document is about ten thousand pixels wide with the actual content bunched up at the far right.

My browser opens an RTL page already scrolled to its origin, so I never saw anything wrong. A headless renderer taking a screenshot starts at x = 0, which in that document is the far left corner. Nine thousand pixels of nothing.

The fix

One property.

/* before */
position: absolute; left: -9999px; opacity: 0;

/* after */
position: absolute; inset-inline-start: -9999px; opacity: 0;

inset-inline-start is the logical form of left. It follows the writing direction, resolving to left in LTR and right in RTL. The honeypot lands outside the viewport on the side the document is already ignoring, and the canvas never grows.

What I took from it

• Every offscreen hack you inherited from a 2010 blog post deserves a second look once you ship RTL. Honeypots, skip links, hidden measurement divs, homegrown sr-only classes. Trade left and right for inset-inline-start and inset-inline-end.

• Your own browser is the worst possible test for this class of bug, because it hides the failure by scrolling to the correct origin for you. Render the page headless and look at the actual pixels.

• If one locale quietly stops earning impressions while the rest are fine, suspect the renderer before you suspect the content.

The Arabic pages have been rendering properly for a while now. The tools live over at Convertica, and the Arabic side is the one that taught me this.