Productlabels schijnen door een sticky balk op mobiel heen

Symptomen

Na een aanpassing van de vormgeving van de labels KORTING en het hartje Favorieten op productfoto's stuurde de eigenaar van de webshop een screenshot van zijn mobiel. Bij het scrollen schoven het label en het hartje over de sticky bovenbalk met het menu heen, in plaats van eronder te verdwijnen.

Omgeving

WordPress met WooCommerce en een page builder. De bovenbalk is sticky (position: sticky). De labels zijn absoluut gepositioneerd in de hoek van de foto met z-index, zodat ze boven de afbeelding liggen.

Diagnose

Op de computer trad het niet op. Op mobiel is de balk lager en schuiven de productkaarten er meer onderdoor.
In DevTools: de balk zelf had een hoge z-index, maar zat in een omhulsel van de page builder met z-index: 1, dat daarmee een eigen stapelcontext (stacking context) vormde. Naar buiten gedroeg de hele balk zich als laag 1.
De labels hadden een z-index hoger dan 1 en lagen niet in een eigen context. Ze concurreerden dus direct met het omhulsel van de balk en wonnen.

De balk had z-index 999, maar binnen een omhulsel met z-index 1, dus naar buiten gold de één. Het label met z-index 5 versloeg hem. Na het toevoegen van isolation: isolate aan de productkaart concurreert het label alleen nog binnen de kaart.

Oorzaak

z-index wordt alleen vergeleken binnen dezelfde stapelcontext. Een hoog getal binnen een omhulsel met z-index: 1 helpt niet tegen een element daarbuiten met een getal van 2 of meer.

Wat er dreigt als je niets doet

Op mobiel, waar de meeste klanten tegenwoordig kopen, ziet de website er kapot uit: labels kruipen over het menu en bedekken het. Een klein gebrek, maar het vermindert het vertrouwen in de webshop en kan de navigatie blokkeren. Een ondeskundige reparatie door z-index-getallen te verhogen verplaatst het probleem alleen.

Reparatie

In plaats van de getallen van de balk te verhogen (en te vechten met de page builder) hebben we de labels in een eigen context opgesloten:

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

isolation: isolate maakt van de kaart en van de foto op de productpagina een zelfstandige laag. Het label ligt boven de foto binnen de kaart, maar de hele kaart gedraagt zich tegenover de balk als gewone inhoud. De CSS staat in een aparte mu-plugin; terugdraaien betekent het bestand verwijderen.

Controle

Na het legen van de cache hebben we op mobiel en computer de winkel, een categorie en een productpagina met de sectie Gerelateerde producten doorgelopen. De labels en het hartje liggen boven de foto en verdwijnen bij het scrollen onder de balk.

Preventie en lessen

Geef je een element een z-index, sluit dan zijn ouder op met isolation: isolate. Het getal geldt dan alleen binnen en komt een sticky header of pop-up niet meer in de weg. Test ook het scrollen op mobiel, niet alleen een statische screenshot.

Gerelateerde diensten: Storingen en fouten Webshop en checkout