Etykiety produktów przebijają przez przyklejony pasek na telefonie

Objawy

Po zmianie wyglądu etykiet PROMOCJA i serduszka Ulubione na zdjęciach produktów właściciel sklepu przysłał zrzut ekranu z telefonu. Podczas przewijania strony etykieta i serduszko przejeżdżały nad przyklejonym górnym paskiem z menu, zamiast znikać pod nim.

Środowisko

WordPress z WooCommerce i page builderem. Górny pasek jest przyklejony (position: sticky). Etykiety są pozycjonowane absolutnie w rogu zdjęcia z z-index, żeby były nad obrazkiem.

Diagnoza

Na komputerze problem nie występował. Na telefonie pasek jest niższy, a karty produktów pod nim przejeżdżają bardziej.
W DevTools: sam pasek miał wysoki z-index, ale był opakowany w kontener page buildera, który miał z-index: 1 i przez to tworzył własny kontekst nakładania (stacking context). Na zewnątrz cały pasek zachowywał się jak warstwa 1.
Etykiety miały z-index wyższy niż 1 i nie leżały w żadnym własnym kontekście. Rywalizowały więc bezpośrednio z kontenerem paska i wygrywały.

Pasek miał z-index 999, ale wewnątrz kontenera z z-indexem 1, więc na zewnątrz liczyła się jedynka. Etykieta z z-indexem 5 go przykryła. Po dodaniu isolation: isolate do karty produktu etykieta rywalizuje tylko wewnątrz karty.

Przyczyna

z-index porównuje się tylko w obrębie tego samego kontekstu nakładania. Wysoka liczba wewnątrz kontenera z z-index: 1 nie pomoże wobec elementu na zewnątrz, który ma 2 i więcej.

Co grozi, jeśli tego nie naprawisz

Na telefonie, z którego dziś kupuje większość klientów, strona wygląda na zepsutą: etykiety wchodzą na menu i je zasłaniają. Drobna wada, która jednak obniża zaufanie do sklepu i może zablokować nawigację. Nieprofesjonalna naprawa przez podbijanie liczb z-indexu tylko przenosi problem w inne miejsce.

Naprawa

Zamiast podbijać liczby przy pasku (i walczyć z page builderem) zamknęliśmy etykiety we własnym kontekście:

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

isolation: isolate robi z karty i zdjęcia na stronie produktu osobną warstwę. Etykieta jest nad zdjęciem wewnątrz karty, ale cała karta zachowuje się wobec paska jak zwykła treść. CSS jest w osobnej wtyczce mu-plugin, cofnięcie oznacza usunięcie pliku.

Weryfikacja

Po wyczyszczeniu cache przeszliśmy na telefonie i komputerze sklep, kategorię i stronę produktu z sekcją Powiązane. Etykiety i serduszko są nad zdjęciem, a przy przewijaniu znikają pod paskiem.

Zapobieganie i wnioski

Gdy nadajesz elementowi z-index, zamknij jego rodzica przez isolation: isolate. Liczba obowiązuje wtedy tylko wewnątrz i nie zderzy się z przyklejonym nagłówkiem ani wyskakującym okienkiem. Testuj też przewijanie na telefonie, nie tylko statyczny zrzut.

Powiązane usługi: Awarie i błędy Sklep i kasa