Topik

Layout, Overflow & Cascade CSS

Sticky yang mati gara-gara satu `overflow` di body, grid yang berantakan karena item `display:none`, dan specificity yang diam-diam mengalahkan komponen 'global'-mu. Klaster ini berisi bug CSS nyata beserta cara melacaknya di DevTools, bukan teori kaskade dari spec. Cocok kalau layout-mu 'hampir benar' tapi ada satu piksel yang membangkang.

16 artikel

Mulai dari sini

`overflow-y: auto` di `body` Bikin Semua `position: sticky` Mati? Body Jadi Scroll Container

Section scrollytelling gagal di-pin dan tampil blank? overflow-y auto di body mematikan position sticky. Ganti ke overflow-y visible plus overflow-x clip.

Baca Selengkapnya

Ada Strip Putih ~24px di Atas Hero Full-Bleed di Tema Block? Itu `--wp--style--block-gap`
12 Juli 2026
Panel Accordion `max-height: 0` Masih Bocorkan Sesempil Konten? Padding yang Nyelip Lewat `overflow: hidden`
11 Juli 2026
Kartu Produk Menciut Jadi 240px di Desktop? `display:none` di Sidebar Merusak Auto-Placement Grid
7 Juli 2026
Ikon SVG Gepeng, Lingkaran Jadi Elips di Slot Tertentu? `preserveAspectRatio` `none` Men-stretch Non-Uniform
4 Juli 2026
Layout Shortcode di `display: grid` Meledak di Live Site? `wpautop` Menyelipkan `<p>` Kosong Jadi Grid Item Hantu
1 Juli 2026
Dua Kolom “Tinggi Sama” Tanpa JavaScript: Grid Stretch + Flex Distribute
27 Juni 2026
Ganti Satu `--token` Warna tapi Warna Lama Masih Nyangkut: Hex Hardcoded di Bundle JS & SVG
27 Juni 2026
`overflow-x: hidden` Mematikan `position: sticky` di iOS Safari, Ganti ke `overflow-x: clip`
26 Juni 2026
Toggle Visibilitas via Class CSS Gagal? Atribut HTML `hidden` Itu `display:none`
26 Juni 2026
Teks Gradien dengan `background-clip: text` Memotong Ekor Huruf (g, p, q, y), Ini Perbaikannya
26 Juni 2026
Kontrol Peta Leaflet Nembus ke Atas Header Sticky, Perbaiki dengan Stacking Context
26 Juni 2026
Form GoHighLevel Jadi Tak Terlihat (Putih di Atas Putih) Setelah Tema Diubah Gelap↔Terang
25 Juni 2026
Override CSS Page-Scoped Diam-Diam Mengalahkan Komponen 'Global' Saya di Specificity
18 Juni 2026
Atribut `style=` Ganda di Satu Elemen, Browser Diam-Diam Hanya Pakai yang Pertama
11 Juni 2026
Anchor Bersarang (`<a>` di Dalam `<a>`) Diam-Diam Merusak Card Grid Saya
10 Juni 2026

`overflow-y: auto` di `body` Bikin Semua `position: sticky` Mati? Body Jadi Scroll Container

Ada Strip Putih ~24px di Atas Hero Full-Bleed di Tema Block? Itu `--wp--style--block-gap`

Panel Accordion `max-height: 0` Masih Bocorkan Sesempil Konten? Padding yang Nyelip Lewat `overflow: hidden`

Kartu Produk Menciut Jadi 240px di Desktop? `display:none` di Sidebar Merusak Auto-Placement Grid

Ikon SVG Gepeng, Lingkaran Jadi Elips di Slot Tertentu? `preserveAspectRatio` `none` Men-stretch Non-Uniform

Layout Shortcode di `display: grid` Meledak di Live Site? `wpautop` Menyelipkan `<p>` Kosong Jadi Grid Item Hantu

Dua Kolom “Tinggi Sama” Tanpa JavaScript: Grid Stretch + Flex Distribute

Ganti Satu `--token` Warna tapi Warna Lama Masih Nyangkut: Hex Hardcoded di Bundle JS & SVG

`overflow-x: hidden` Mematikan `position: sticky` di iOS Safari, Ganti ke `overflow-x: clip`

Toggle Visibilitas via Class CSS Gagal? Atribut HTML `hidden` Itu `display:none`

Teks Gradien dengan `background-clip: text` Memotong Ekor Huruf (g, p, q, y), Ini Perbaikannya

Kontrol Peta Leaflet Nembus ke Atas Header Sticky, Perbaiki dengan Stacking Context

Form GoHighLevel Jadi Tak Terlihat (Putih di Atas Putih) Setelah Tema Diubah Gelap↔Terang

Override CSS Page-Scoped Diam-Diam Mengalahkan Komponen 'Global' Saya di Specificity

Atribut `style=` Ganda di Satu Elemen, Browser Diam-Diam Hanya Pakai yang Pertama

Anchor Bersarang (`<a>` di Dalam `<a>`) Diam-Diam Merusak Card Grid Saya