Produkt-Labels scheinen auf dem Handy durch die fixierte Leiste hindurch

Symptome

Nach einer Anpassung des Aussehens der Labels SALE und des Herzchens Favoriten auf den Produktfotos schickte der Inhaber des Onlineshops einen Screenshot vom Handy. Beim Scrollen der Seite fuhren Label und Herzchen über die fixierte obere Leiste mit dem Menü, statt unter ihr zu verschwinden.

Umgebung

WordPress mit WooCommerce und Page Builder. Die obere Leiste ist fixiert (position: sticky). Die Labels sind absolut in der Ecke des Fotos positioniert, mit z-index, damit sie über dem Bild liegen.

Diagnose

Am Computer zeigte es sich nicht. Auf dem Handy ist die Leiste niedriger, und die Produktkarten fahren stärker unter ihr durch.
In den DevTools: Die Leiste selbst hatte einen hohen z-index, war aber in einen Container des Page Builders gepackt, der z-index: 1 hatte und damit einen eigenen Stapelkontext (stacking context) erzeugte. Nach außen verhielt sich die ganze Leiste wie Ebene 1.
Die Labels hatten einen z-index größer als 1 und lagen in keinem eigenen Kontext. Sie konkurrierten also direkt mit dem Container der Leiste und gewannen.

Die Leiste hatte z-index 999, aber innerhalb eines Containers mit z-index 1, nach außen galt also die Eins. Das Label mit z-index 5 überdeckte sie. Nach dem Hinzufügen von isolation: isolate zur Produktkarte konkurriert das Label nur innerhalb der Karte.

Ursache

z-index wird nur innerhalb desselben Stapelkontexts verglichen. Eine hohe Zahl innerhalb eines Containers mit z-index: 1 hilft nicht gegen ein Element außerhalb, das 2 oder mehr hat.

Was droht, wenn man nichts tut

Auf dem Handy, von dem heute die meisten Kunden einkaufen, wirkt die Website kaputt: Labels kriechen über das Menü und verdecken es. Ein kleiner Mangel, der aber das Vertrauen in den Shop senkt und die Navigation blockieren kann. Eine laienhafte Reparatur durch Erhöhen der z-index-Werte verschiebt das Problem nur woandershin.

Reparatur

Statt die Zahlen der Leiste zu erhöhen (und mit dem Page Builder zu kämpfen), haben wir die Labels in einen eigenen Kontext eingeschlossen:

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

isolation: isolate macht aus der Karte und dem Foto in der Detailansicht eine eigenständige Ebene. Das Label liegt innerhalb der Karte über dem Foto, aber die ganze Karte verhält sich gegenüber der Leiste wie normaler Inhalt. Das CSS steckt in einem separaten Mu-Plugin, Rückgängigmachen heißt die Datei löschen.

Überprüfung

Nach dem Leeren des Caches haben wir auf dem Handy und am Computer Shop, Kategorie und Produktdetail mit dem Abschnitt Ähnliche Produkte durchgesehen. Labels und Herzchen liegen über dem Foto und verschwinden beim Scrollen unter der Leiste.

Vorbeugung und Lehren

Wenn Sie einem Element einen z-index geben, schließen Sie sein Elternelement mit isolation: isolate ein. Die Zahl gilt dann nur innen und kommt einem fixierten Header oder einem Pop-up-Fenster nicht in die Quere. Testen Sie auch das Scrollen auf dem Handy, nicht nur einen statischen Screenshot.

Verwandte Leistungen: Notfälle und Fehler Onlineshop und Kasse