Permintaan kliennya cuma satu kalimat: situsnya dibangun penuh lewat Elementor, tanpa hack apa pun. Yang bikin kalimat itu punya gigi adalah daftar apa saja yang akhirnya dihitung sebagai hack. Blok Custom CSS di page settings masuk hitungan, karena begitu syarat dari kliennya, dan blok dengan isi yang persis sama duduk di keenam belas halaman.
Sebelum dicabut, blok itu sempat terlihat tidak berbahaya. Semua rule di dalamnya di-scope ke bentuk .elementor-<id-halaman> .elementor-element-<id-elemen>, dan setelah template legacy diterapkan, id elemen di 15 halaman lain sudah berganti. Jadi di satu halaman pengecualian hack itu memang bekerja dan visualnya benar, sementara di 15 halaman sisanya rule-nya tetap tersimpan di page settings tapi tidak merender apa-apa. Kode mati yang menumpang.
Ada satu bagian yang tidak ikut pola itu. Di baris 13 sampai 15 blok yang sama ada aturan overflow yang tidak menyebut id elemen mana pun:
html, body {
overflow-x: hidden;
}Catatan projeknya menandai bagian ini berbeda dari tetangganya: sifatnya sesitus, jadi tidak bisa diurus per halaman. Pada 18 Mei blok custom_css dicabut dari 15 halaman non-pengecualian, dan hampir 29 ribu karakter hilang sekaligus.
Satu halaman dari lima belas
Sesudah itu kelima belas halaman yang dicabut saya sapu ulang di viewport 1440px. Empat belas bersih, satu tidak.
Halaman yang tidak bersih punya overflow horizontal 683px. Artinya dokumennya melebar 1440 + 683 = 2123px sementara jendelanya tetap 1440, dan halaman itu bisa digeser ke samping sejauh 683 piksel oleh siapa pun yang membukanya.
Sel yang tidak pernah diberi lebar
Pelakunya satu sel flex di baris tiga pil halaman tersebut. Sel itu tidak punya width eksplisit, dan juga tidak punya _flex_size: none. Dua saudaranya di baris yang sama punya width 377 dan 339. Kira-kira begini bentuk datanya sebelum diperbaiki:
[
{ "settings": { "width": { "unit": "px", "size": 377 } } },
{ "settings": { "width": { "unit": "px", "size": 339 } } },
{ "settings": { } }
]Di Elementor, anak flex tidak punya auto-sizing yang bisa diandalkan. Bawaannya mereka melar selebar penuh. Sel ketiga itu pun memuai sampai memenuhi lebar dalam induknya, yaitu 1182px. Hitungannya lurus dan bisa diulang siapa saja: viewport 1440 dikurangi padding 129 di kiri dan 129 di kanan, jadi 1440 - 258 = 1182.
Catatan sumbernya membaca kejadian ini sebagai bug layout laten yang selama ini ditutupi diam-diam oleh overflow-x: hidden, artinya bugnya sudah ada jauh sebelum aturan itu dicabut. Saya menuliskannya sebagai pembacaan, bukan sebagai vonis. Yang benar-benar terukur cuma ini: setelah blok itu hilang, halaman tersebut mendadak punya 683px overflow di 1440, sementara empat belas halaman lain yang dicabut dengan cara yang sama tidak.
Perbaikannya pakai kontrol native
Yang akhirnya dipasang di sel bermasalah itu dua setting: width 480 dan _flex_size: none.
{
"width": { "unit": "px", "size": 480 },
"_flex_size": "none"
}_flex_size: none bukan CSS tempelan yang diselundupkan dari luar. Itu kontrol asli Elementor, ada di Advanced lalu Flex lalu Size lalu None, dan tugasnya mencegah anak flex menyusut. Untuk projek yang syaratnya tanpa hack, bedanya besar: perbaikannya tidak menanam utang baru di tempat yang baru saja dibersihkan.
Aturan yang saya ambil dari kasus ini pendek. Tiap anak flex wajib punya salah satu dari dua hal, width eksplisit atau _flex_size: 'none'. Salah satu saja cukup, yang tidak boleh adalah kosong dua-duanya. Sel yang bermasalah tadi persis kosong dua-duanya, sementara dua saudaranya tidak.
Gejala yang sama sudah tercatat lebih dulu
Sel itu bukan penampakan pertama dari sifat yang sama, dan catatan resep projeknya sudah menyimpan dua kejadian sebelumnya.
Di baris pil section lain, content_width: full bawaan bikin tiap pil melar selebar penuh baris sampai akhirnya menumpuk vertikal. Perbaikannya width eksplisit per pil, 260, 440, 360, dan 290, mengikuti pola pil di baris yang jadi biang kasus ini, yang memakai 298. Catatan berikutnya melarang membiarkan container pil di baris yang sama itu pada content_width: full bawaan, karena hasilnya pembagian rata di sepanjang baris. Widthnya diisi per pil mengikuti desain, tiga pil pertama lebih sempit di 244 dan pil terakhir 308 kalau teksnya lebih panjang. Tanpa width eksplisit, pil melar sendiri dan teksnya tidak membungkus dengan benar.
Sisi sebaliknya dari sifat yang sama pernah menyerang ikon. Ikon di pill render 11 sampai 17 kali 20 piksel padahal seharusnya 20 kali 20, karena SVG-nya punya viewBox 20 kali 20 tanpa atribut width dan height sehingga lebar img-nya menciut sendiri, lalu sebagai anak flex dia ikut diciutkan waktu heading tetangganya panjang. Skrip global memperbaiki 385 ikon di 9 halaman pada tanggal yang sama dengan pencabutan custom_css, 18 Mei. Melar dan menyusut itu dua arah dari satu perilaku yang sama, dan setting yang sama juga yang menghentikan keduanya.
Cek yang wajib jalan setelah aturan overflow dicabut
Aturan proses yang lahir dari kasus ini: setelah membuang style overflow-x: hidden mana pun, sapu semua halaman dengan cek document.scrollWidth lewat peramban headless di viewport sasaran, supaya apa yang tadinya tersembunyi ikut keluar. Aturan itu ditulis ke daftar DO NOT projeknya, dengan sel ini sebagai contoh kasusnya.
Bentuk ceknya sederhana. Puppeteer membuka halaman lalu membandingkan document.documentElement.scrollWidth dengan lebar viewport di 1440:
const pg = await browser.newPage();
await pg.setViewport({ width: 1440, height: 900 });
await pg.goto(pageUrl, { waitUntil: 'networkidle0' });
const scrollWidth = await pg.evaluate(() => document.documentElement.scrollWidth);
console.log(scrollWidth === 1440 ? 'bersih' : `overflow ${scrollWidth - 1440}px`);Skrip yang dipakai di projek ini jalan lewat puppeteer-core dengan peramban yang sudah terpasang di mesin sebagai executable, viewport 1440 kali 900, memuat halaman dari server lokal. Setelah sel tadi diperbaiki, keenam belas halaman dinyatakan terkonfirmasi tanpa overflow horizontal.
Pelajaran
Aturan sesitus yang dipasang untuk merapikan gejala akan tetap bekerja diam-diam sampai ada yang mencabutnya, dan yang keluar saat itu biasanya bukan bug baru, melainkan tagihan lama yang jatuh tempo. Karena itu pencabutannya perlu disusul pengukuran, bukan cuma dilihat sekilas.
Yang tidak saya klaim: aturan overflow-x: hidden itu sekarang pasti sudah tidak dibutuhkan. Verifikasinya baru di 1440, dan viewport yang lebih kecil bisa saja masih memerlukannya. Aturan itu sendiri juga belum benar-benar pergi, karena ia masih ikut di dalam blok custom_css yang tersisa di satu halaman pengecualian. Tepat setelah pencabutan, sisanya 1927 karakter dari total 30.832 sebelumnya, jadi yang benar-benar hilang saat itu 30.832 - 1927 = 28.905 karakter.
Sisanya masih menggantung. Halaman yang bermasalah tadi sekarang tercatat nol widget HTML dan nol karakter custom_css, tapi masih menyimpan 47 atribut style inline, dan di keenam belas halaman totalnya 549, lebih tinggi dari perkiraan awal. Apakah atribut inline itu dihitung hack atau masih dianggap wajar untuk Elementor bukan keputusan saya, itu menunggu kliennya sendiri yang menjelaskan.