Honeypot הרס לי את הדפים בערבית

Convertica פועלת בשבע שפות. שש מהן נכתבות משמאל לימין. ערבית נכתבת מימין לשמאל. חוסר ההתאמה הזה עלה לי שעות של דיבאגינג.

כל דף בערבית נראה תקין בדפדפן שלי. ואז הרצתי Lighthouse. צילום המסך חזר ריק — לבן לגמרי, לא שבור ולא טעון חלקית.

ה-URL וה-HTML לא השתנו. Chrome הציג את הדף, אבל Headless Chrome לא הראה כלום. בוטים של Google ו-Bing משתמשים בדפדפנים headless, כך שזה היה קריטי.

האשם היה spam honeypot. הוספתי input נסתר כדי לתפוס בוטים והצבתי אותו רחוק מחוץ ל-viewport:

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

במסמכים משמאל לימין, הדפדפן חותך את ה-overflow, כך שה-honeypot יושב בשטח מת.

כשקבעתי dir="rtl", נקודת המוצא של הגלילה (scroll origin) קופצת לקצה הימני. ה-overflow השמאלי הופך לשטח אמיתי, מה שמותח את המסמך לרוחב של עשרת אלפים פיקסלים, בעוד התוכן נשאר דחוס בקצה הימני ביותר.

הדפדפן שלי גלל אוטומטית לנקודת המוצא הימנית, אז לא ראיתי שום דבר לא תקין. headless renderer מתחיל בפינה השמאלית ביותר ומקרין תשעים אלף פיקסלים של כלום.

ניתן לתקן זאת באמצעות שינוי מאפיין אחד בלבד.

החליפו את left ב-inset-inline-start.

  • ישן: position: absolute; left: -9999px;
  • חדש: position: absolute; inset-inline-start: -9999px;

inset-inline-start עוקב אחר כיוון הכתיבה — פועל כ-left ב-LTR וכ-right ב-RTL — ושומר על ה-honeypot מחוץ למסך בצד הנכון.

בצעו Audit ל-"hacks" הישנים שלכם להסתרת אלמנטים מחוץ למסך כשאתם מוסיפים תמיכה ב-RTL. זה כולל honeypots, skip links ו-divs נסתרים. החליפו left/right ב-logical properties.

הדפדפן שלכם הוא בדיקה גרועה לבאג הזה; הוא מסתיר את הכשל על ידי גלילה עבורכם. בצעו Render לדף במצב headless כדי לראות את הפיקסלים האמיתיים.

אם שפה אחת מפסיקה לקבל impressions בזמן שאחרות נשארות תקינות, בדקו את ה-renderer שלכם.

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