Sebuah Honeypot Merusak Halaman Bahasa Arab Saya

Convertica berjalan dalam tujuh bahasa. Enam di antaranya dibaca dari kiri ke kanan. Bahasa Arab dibaca dari kanan ke kiri. Ketidakcocokan tersebut membuang waktu saya berjam-jam untuk proses debugging.

Setiap halaman bahasa Arab tampak baik-baik saja di browser saya. Kemudian saya menjalankan Lighthouse. Hasil tangkapan layarnya kosong—putih polos, tidak rusak atau terisi setengah.

URL dan HTML tidak berubah. Chrome menampilkan halaman tersebut, tetapi Headless Chrome tidak menampilkan apa pun. Bot dari Google dan Bing menggunakan browser headless, jadi hal ini sangat penting.

Pelakunya adalah sebuah honeypot spam. Saya menambahkan input tersembunyi untuk menangkap bot dan menempatkannya jauh di luar viewport:

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

Dalam dokumen kiri-ke-kanan (LTR), browser memotong overflow, sehingga honeypot berada di ruang kosong.

Saat saya mengatur dir="rtl", titik awal scroll berpindah ke tepi kanan. Overflow di sisi kiri menjadi ruang nyata, meregangkan dokumen hingga selebar sepuluh ribu piksel sementara konten tetap menumpuk di sisi paling kanan.

Browser saya secara otomatis menggulir ke titik awal di sebelah kanan, jadi saya tidak melihat ada yang salah. Sebuah headless renderer memulai dari sudut paling kiri dan merender sembilan ribu piksel kekosongan.

Perbaiki dengan satu perubahan properti saja.

Ganti left dengan inset-inline-start.

  • Lama: position: absolute; left: -9999px;
  • Baru: position: absolute; inset-inline-start: -9999px;

inset-inline-start mengikuti arah penulisan—berfungsi sebagai left pada LTR dan right pada RTL—sehingga menjaga honeypot tetap di luar layar pada sisi yang benar.

Audit kembali trik off-screen lama Anda saat menambahkan dukungan RTL. Itu termasuk honeypot, skip links, dan div tersembunyi. Ganti left/right dengan logical properties.

Browser Anda adalah pengujian yang buruk untuk bug ini; ia menyembunyikan kegagalan dengan menggulirkan halaman untuk Anda. Render halaman secara headless untuk melihat piksel yang sebenarnya.

Jika satu bahasa berhenti mendapatkan impresi sementara bahasa lainnya tetap baik-baik saja, periksa renderer Anda.

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