Štítky produktů prosvítají přes přilepenou lištu na mobilu

Příznaky

Po úpravě vzhledu štítků SLEVA a srdíčka Oblíbené na fotkách produktů poslal vlastník e-shopu snímek z mobilu. Při posouvání stránky štítek i srdíčko přejížděly přes přilepenou horní lištu s menu, místo aby zmizely pod ní.

Prostředí

WordPress s WooCommerce a page builderem. Horní lišta je přilepená (position: sticky). Štítky jsou absolutně umístěné v rohu fotky s z-index, aby byly nad obrázkem.

Diagnostika

Na počítači se to neprojevilo. Na mobilu je lišta nižší a karty produktů pod ní projíždějí víc.
V DevTools: samotná lišta měla vysoký z-index, ale byla zabalená v obalu page builderu, který měl z-index: 1 a tím vytvářel vlastní kontext vrstvení (stacking context). Navenek se celá lišta chovala jako vrstva 1.
Štítky měly z-index vyšší než 1 a neležely v žádném vlastním kontextu. Soutěžily tedy přímo s obalem lišty a vyhrály.

Lišta měla z-index 999, ale uvnitř obalu se z-indexem 1, takže navenek platila jednička. Štítek se z-indexem 5 ji přebil. Po přidání isolation: isolate na kartu produktu soutěží štítek jen uvnitř karty.

Příčina

z-index se porovnává jen v rámci stejného kontextu vrstvení. Vysoké číslo uvnitř obalu s z-index: 1 nepomůže proti prvku venku, který má číslo 2 a víc.

Co hrozí, když se to neřeší

Na mobilu, odkud dnes nakupuje většina zákazníků, působí web rozbitě: štítky lezou přes menu a zakrývají ho. Drobná vada, která ale snižuje důvěru v e-shop a může zablokovat navigaci. Neodborná oprava zvyšováním čísel z-indexu problém jen přesune jinam.

Oprava

Místo zvyšování čísel u lišty (a boje s page builderem) jsme štítky uzavřeli 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 udělá z karty a fotky na detailu samostatnou vrstvu. Štítek je nad fotkou uvnitř karty, ale celá karta se k liště chová jako běžný obsah. CSS je v samostatném mu-pluginu, vrácení znamená smazat soubor.

Ověření

Po vyčištění cache jsme na mobilu i na počítači prošli obchod, kategorii a detail produktu se sekcí Související. Štítky a srdíčko jsou nad fotkou a při posouvání mizí pod lištou.

Prevence a ponaučení

Když dáváte prvku z-index, uzavřete jeho rodiče přes isolation: isolate. Číslo pak platí jen uvnitř a s přilepenou hlavičkou nebo vyskakovacím oknem se nepotká. Testujte i posouvání na mobilu, ne jen statický snímek.

Související služby: Havárie a chyby E-shop a pokladna