Ein Shopify-Nutzer hat CSS-Code (display: none !important;) verwendet, um Produktbilder in Kategoriekarten im Hauptmenü auszublenden, sodass nur der Kategoriename angezeigt wird.
Das Problem:
Der Code funktioniert auf den meisten Geräten (MacBook, Android-Smartphones, Windows)
Auf dem iPhone mit Safari-Browser funktioniert der Code nicht
Vorgeschlagene Lösungsansätze:
Verwendung von herstellerspezifischen Präfixen wie -webkit- für Safari-Kompatibilität
Sicherstellen, dass Safari auf dem neuesten Stand ist
CSS-Code auf Syntaxfehler überprüfen (mit CSS-Validatoren)
Browser-Cache und Verlauf löschen
Prüfen, ob alle verwendeten CSS-Eigenschaften von Safari unterstützt werden
In manchen Fällen können Hosting-Server-Probleme die Ursache sein
Status: Die Diskussion bleibt offen. Falls die Lösungsansätze nicht helfen, wird empfohlen, zertifizierte Shopify-Experten zu kontaktieren. Safari ist bekannt für proprietäre CSS-Interpretation, die sich von anderen Browsern unterscheidet.
Summarized with AI on November 14.
AI used: claude-sonnet-4-5-20250929.
Ich hatte das Problem, dass die Kategorie-Karten in dem Hauptmenü meines Shops immer ein Vorschaubild von einem hinterlegten Produkt angezeigt hat. Gedacht waren aber Kategoriekarten, in dem sich nur der Name der Kategorie befindet, ohne das Bild.
Das konnte ich aber relativ schnell mit dem Code unter base.css lösen mit:
Das Bild wurde nicht mehr angezeigt. Soweit, so gut.
Das Problem ist jetzt aber, dass das nicht auf jedem Gerät zu funktionieren scheint…
Auf dem Iphone im Safari Browser scheint dieser Code nicht zu funktionieren. Auf einem Macbook, auf Andorid Smartphones, Windows etc. funktioniert er einwandfrei.
Kann mir jemand helfen und sagen, woran es liegen könnte?
Ja, solche Problem mit Safari sind uns bekannt denn Safari ist sehr Apple-proprietär und wie eine Blackbox.
Safari interpretiert CSS manchmal anders als andere Browser. Um sicherzustellen, dass dein CSS-Code auch in Safari funktioniert, könntest du versuchen, herstellerspezifische Präfixe wie -webkit- für CSS-Eigenschaften zu verwenden. Dies kann helfen, wenn bestimmte CSS-Eigenschaften in Safari anders gerendert werden.
Stelle auch sicher, dass der Safari-Browser auf dem iPhone auf dem neuesten Stand ist. Ältere Browser-Versionen könnten Probleme mit neueren CSS-Stilen haben. Überprüfe deinen CSS-Code auf Tippfehler oder Syntaxfehler. Es ist möglich, dass ein Fehler im Code auf einigen Browsern toleriert wird, aber nicht auf Safari. Tools wie CSS-Validatoren können hierbei hilfreich sein. Manchmal können veraltete Daten im Cache des Browsers zu Problemen führen. Das Löschen des Cache und des Verlaufs im Safari könnte das Problem beheben.
Es ist möglich, dass bestimmte CSS-Eigenschaften, die du verwendest, von Safari nicht unterstützt werden. Überprüfe, ob alle verwendeten CSS-Eigenschaften von Safari unterstützt werden. In manchen Fällen kann das Problem auch durch den Hosting-Server verursacht werden. Stelle sicher, dass der Server korrekt konfiguriert ist und keine Probleme bei der Auslieferung der CSS-Dateien an Safari-Browser gibt.
Wenn diese Lösungsansätze nicht helfen, könnte es sinnvoll sein, einen unserer zertifizierten Experten zu kontaktieren.
Habt ihr auch den Shop auf die Weihnachtssaison umgestellt? Jetzt ist die Zeit wo Online Shopper nach !
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. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
!