Festes Hintergrundbild im Shopify-Shop (Theme Debutify) per benutzerdefiniertem HTML/CSS: In Chrome/Android funktioniert „background-attachment: fixed“ wie gewünscht, in Safari (insb. iOS) ist das Bild stark gezoomt/pixelig und scrollt mit.
Ursache: Bekannter Safari/WebKit-Bug bei „background-attachment: fixed“. Vorschlag: Workaround mit WebKit-spezifischem CSS und einem „body::before“-Pseudo-Element, das einen fixierten Hintergrund simuliert. Hinweis auf Debutify-Support.
Tests/Ergebnisse: Variationen des Workarounds führen weiterhin zu schlechter Darstellung in Safari. Zusätzliche Themes (Origin, Dawn) ausprobiert; dort wird mit dem eingesetzten benutzerdefinierten Liquid das Hintergrundbild gar nicht angezeigt.
Aktueller Stand: Keine funktionierende Lösung im Thread. Empfohlen: Kontakt zu Debutify-Entwicklern, ggf. Theme-Wechsel, oder Einbindung eines externen Experten/Fragen im Entwicklerforum (Links wurden bereitgestellt).
Begriffe kurz erklärt:
„background-attachment: fixed“: Hintergrund bleibt beim Scrollen statisch.
„::before“-Pseudo-Element: Zusätzliche Ebene vor dem Inhalt, nutzbar als Hintergrund.
WebKit: Rendering-Engine von Safari mit spezifischen CSS-Eigenheiten.
Offen/ungeklärt: Konkrete, verifizierte Implementierung, die in Safari zuverlässig funktioniert.
ich bin gerade dabei meinen Shop zu bauen und möchte über den kompletten Shop ein festes Hintergrundbild (bis auf Header und Footer).
Dafür habe ich mir einfach eine neue Sektion mit benutzerdefinierter HTML eingefügt und das Hintergrundbild mit folgendem Code geändert:
body {
margin: 0;
padding: 0;
background-image: url('xxxxxxx'); /* Hintergrundbild URL hier einfügen */
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
}
Dies funktioniert in meinem Browser und auf meinem Android Handy auch genau so wie ich es haben will (Hintergrundbild ist nicht gezoomed und Sektionen bewegen sich über das feststehende Bild).
Öffne ich den Shop jedoch über ein Apple Gerät mit Safari ist das Bild stark verpixelt hineingezoomed und bewegt sich beim scrollen mit, steht also nicht im Hintergrund fest).
Habt ihr villeicht irgendeine Lösung oder Idee wie man dieses Problem beheben könnte?
Leider ist das Problem auf Safari ein altbekanntes Problem das manchmal bei Safari auftritt, insbesondere in Verbindung mit dem background-attachment: fixed;-Stil.
Um das Problem zu beheben, kannst du einen Workaround verwenden, der speziell für Safari gedacht ist. Hier ist, wie du es machen kannst:
Füge einen separaten Stil für Safari hinzu, indem du die CSS Media Query für Webkit (den Browser-Engine von Safari) verwendest.
Verwende eine Kombination aus ::before Pseudo-Element, um einen festen Hintergrund zu simulieren.
Hier ist ein überarbeiteter Code:
Im obigen Code erzeugt body::before effektiv einen festen Hintergrund für den gesamten Browser-Viewport, der den gleichen Effekt wie background-attachment: fixed; hat, aber ohne die problematischen Zoom- und Scroll-Probleme von Safari.
Bei weiteren Fragen bitte die Theme Entwickler von Debutify kontaktieren. Die haben einen tollen Kundensupport Team!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Also kann man da nichts wirklich gegen tuen?
Ich bin allgemein super zufrieden mit dem Hintergrund, nur auf Safari sieht dies leider absulut grauenhaft und amateurhaft aus…
Ja, das ist auch ein Problem des Debutify Themes (dass wir eigentlich nicht unterstützen) und dessen Kompatibilität mit Safari. Hast du auch andere Themes zum Shop hinzugefügt, um sie zu testen?
Das Problem mit background-attachment: fixed in Safari, besonders auf iOS-Geräten, ist bekannt und hat Webentwickler seit einiger Zeit herausgefordert. Die Kernursache des Problems ist, dass Safari (insbesondere auf iOS) die fixierte Hintergrundpositionierung nicht so verarbeitet wie andere Browser.
Hey @Gabe
ich habe deinen Code oben noch einmal in allen möglichen Varianten probiert, komme aber immer aufs selbe schlechte Ergebniss.
Außerdem habe ich gerade noch Origin und Dawn probiert, dort wird mir jedoch erst gar kein Hintergrundbild angezeigt, wenn ich dein code ins benutzerdefinierte Liquid einfüge…
