Produktgalerie bleibt auf “is-loading” hängen (Desktop), Mobile funktioniert

Shopware 6 (German)
1

Shopware 6.7.10.2: Produktgalerie bleibt auf “is-loading” hängen (Desktop), Mobile funktioniert

Hallo zusammen,

nach dem Update eines Shops von Shopware 6.7.3.1 auf 6.7.10.2 tritt bei vielen Produkten ein merkwürdiges Problem mit der Produktgalerie auf.

Symptom:

  • Das Hauptbild erscheint beim Laden der Produktdetailseite kurz und verschwindet anschließend.
  • Das Problem tritt nur auf Desktop-Bildschirmgrößen auf.
  • Auf Smartphones bzw. kleinen Viewports funktioniert die Galerie korrekt.
  • Wenn die Seite zunächst in kleiner Breite geladen und anschließend das Browserfenster vergrößert wird, funktioniert die Galerie ebenfalls.

Umgebung:

  • Shopware 6.7.10.2
  • Standardtheme
  • Keine JavaScript-Fehler in der Browserkonsole
  • Thumbnail-Generierung läuft fehlerfrei durch

Analyse:
Das Galerie-Element bleibt dauerhaft auf folgendem Zustand:

row gallery-slider-row is-loading js-gallery-zoom-modal-container js-slider-initialized

Wenn man in der Browserkonsole manuell ausführt:

document.querySelector('.gallery-slider-row').classList.remove('is-loading')

erscheint das Hauptbild sofort und die Galerie wird sichtbar.

Bereits geprüft:

  • Cache geleert
  • Theme neu kompiliert
  • Thumbnail-Generierung erfolgreich durchgeführt
  • Defekte Medien bereinigt
  • Standard-Produktlayout getestet
  • Standardtheme aktiv

Hat jemand ein ähnliches Verhalten festgestellt oder eine Idee, warum die Galerie auf Desktop nicht aus dem Status is-loading herauskommt?

Vielen Dank!

2

Das Problem ist bekannt: Gallery-slider keeps is-loading class in Firefox/Safari after 6.7.10.0 (regression from #15876) · Issue #16757 · shopware/shopware · GitHub
und fix(storefront): remove native lazy loading from gallery thumbnails by ShopGandalf · Pull Request #16870 · shopware/shopware · GitHub → Lösung kommt mit 6.7.12.0.

// Quick fix for Firefox/Safari gallery crash
document.addEventListener('DOMContentLoaded', () => {
const ua = navigator.userAgent.toLowerCase();
const isAffected = ua.includes('firefox') || ua.includes('iphone') || ua.includes('ipad') || (ua.includes('safari') && !ua.includes('chrome'));

if (isAffected) {
    setTimeout(() => {
        const loaders = document.querySelectorAll('.gallery-slider-row.is-loading');
        loaders.forEach(row => {
            row.classList.remove('is-loading');
            window.dispatchEvent(new Event('resize'));
        });
    }, 1000);
}

});

Kurzer Javascript-Fix den wir akuell laufen haben.