A termékcímkék átlátszanak a rögzített menüsávon mobilon

Tünetek

Az AKCIÓ címkék és a Kedvencek szívecske megjelenésének módosítása után a termékfotókon a webáruház tulajdonosa képernyőképet küldött mobilról. Görgetéskor a címke és a szívecske a rögzített felső menüsáv fölött csúszott át, ahelyett, hogy eltűnt volna alatta.

Környezet

WordPress WooCommerce-szel és oldalépítővel. A felső sáv rögzített (position: sticky). A címkék abszolút pozicionálással a fotó sarkában vannak z-index-szel, hogy a kép fölött legyenek.

Diagnózis

Számítógépen nem jelentkezett. Mobilon a sáv alacsonyabb, és a termékkártyák alatta többet csúsznak.
A DevToolsban: maga a sáv magas z-index-et kapott, de az oldalépítő egy burkolójában volt, amelynek z-index: 1 értéke volt, és ezzel saját rétegzési kontextust hozott létre (stacking context). Kifelé az egész sáv 1-es rétegként viselkedett.
A címkék z-index-e 1-nél nagyobb volt, és nem voltak saját kontextusban. Így közvetlenül a sáv burkolójával versenyeztek, és nyertek.

A sáv z-indexe 999 volt, de egy 1-es z-indexű burkolón belül, így kifelé az egyes számított. Az 5-ös z-indexű címke legyőzte. Miután a termékkártya megkapta az isolation: isolate tulajdonságot, a címke csak a kártyán belül versenyez.

Ok

A z-index csak ugyanazon a rétegzési kontextuson belül hasonlítható össze. A magas szám egy z-index: 1 értékű burkolón belül nem segít egy kívül lévő, 2-es vagy nagyobb számú elemmel szemben.

Mi fenyeget, ha nem foglalkozunk vele

Mobilon, ahonnan ma a vásárlók többsége rendel, a weboldal hibásnak hat: a címkék rámásznak a menüre és eltakarják. Apró hiba, de csökkenti a webáruházba vetett bizalmat, és akadályozhatja a navigációt. A z-index számok növelésével végzett szakszerűtlen javítás a problémát csak máshová helyezi át.

Javítás

A sáv számainak növelése (és az oldalépítővel való harc) helyett a címkéket saját kontextusba zártuk:

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

Az isolation: isolate a kártyából és a termékoldal fotójából önálló réteget csinál. A címke a kártyán belül a fotó fölött van, de az egész kártya a sávhoz képest közönséges tartalomként viselkedik. A CSS külön mu-pluginban van, a visszaállítás a fájl törlését jelenti.

Ellenőrzés

A gyorsítótár ürítése után mobilon és számítógépen is végigmentünk az üzleten, a kategórián és a termékoldalon a Kapcsolódó termékek szekcióval. A címkék és a szívecske a fotó fölött vannak, és görgetéskor eltűnnek a sáv alatt.

Megelőzés és tanulságok

Ha egy elemnek z-index-et ad, zárja le a szülőjét isolation: isolate tulajdonsággal. A szám akkor csak belül érvényes, és nem ütközik a rögzített fejléccel vagy a felugró ablakkal. Mobilon a görgetést is tesztelje, ne csak egy statikus képet.

Kapcsolódó szolgáltatások: Üzemzavarok és hibák Webáruház és pénztár