Štítky produktov presvitajú cez prilepenú lištu na mobile

Príznaky

Po úprave vzhľadu štítkov ZĽAVA a srdiečka Obľúbené na fotkách produktov poslal majiteľ e-shopu snímku z mobilu. Pri posúvaní stránky štítok aj srdiečko prechádzali cez prilepenú hornú lištu s menu, namiesto aby zmizli pod ňou.

Prostredie

WordPress s WooCommerce a page builderom. Horná lišta je prilepená (position: sticky). Štítky sú absolútne umiestnené v rohu fotky so z-index, aby boli nad obrázkom.

Diagnostika

Na počítači sa to neprejavilo. Na mobile je lišta nižšia a karty produktov pod ňou prechádzajú viac.
V DevTools: samotná lišta mala vysoký z-index, ale bola zabalená v obale page buildera, ktorý mal z-index: 1 a tým vytváral vlastný kontext vrstvenia (stacking context). Navonok sa celá lišta správala ako vrstva 1.
Štítky mali z-index vyšší ako 1 a neležali v žiadnom vlastnom kontexte. Súťažili teda priamo s obalom lišty a vyhrali.

Lišta mala z-index 999, ale vnútri obalu so z-indexom 1, takže navonok platila jednotka. Štítok so z-indexom 5 ju prebil. Po pridaní isolation: isolate na kartu produktu súťaží štítok len vnútri karty.

Príčina

z-index sa porovnáva len v rámci rovnakého kontextu vrstvenia. Vysoké číslo vnútri obalu so z-index: 1 nepomôže proti prvku vonku, ktorý má číslo 2 a viac.

Čo hrozí, keď sa to nerieši

Na mobile, odkiaľ dnes nakupuje väčšina zákazníkov, pôsobí web pokazene: štítky lezú cez menu a zakrývajú ho. Drobná vada, ktorá však znižuje dôveru v e-shop a môže zablokovať navigáciu. Neodborná oprava zvyšovaním čísel z-indexu problém len presunie inam.

Oprava

Namiesto zvyšovania čísel pri lište (a boja s page builderom) sme štítky uzavreli do vlastného kontextu:

.woocommerce ul.products li.product,
.single-product .elementor-widget-container:has(> span.onsale),
.single-product .woocommerce-product-gallery {
  isolation: isolate !important;
}

isolation: isolate urobí z karty a fotky na detaile samostatnú vrstvu. Štítok je nad fotkou vnútri karty, ale celá karta sa k lište správa ako bežný obsah. CSS je v samostatnom mu-plugine, vrátenie znamená zmazať súbor.

Overenie

Po vyčistení cache sme na mobile aj na počítači prešli obchod, kategóriu a detail produktu so sekciou Súvisiace. Štítky a srdiečko sú nad fotkou a pri posúvaní miznú pod lištou.

Prevencia a ponaučenie

Keď dávate prvku z-index, uzavrite jeho rodiča cez isolation: isolate. Číslo potom platí len vnútri a s prilepenou hlavičkou alebo vyskakovacím oknom sa nestretne. Testujte aj posúvanie na mobile, nie len statickú snímku.

Súvisiace služby: Havárie a chyby E-shop a pokladňa