von Auf einer mit Bootstrap erstellten Seite hatte ich das Problem, dass das Hintergrundbild eines Containers nur auf meinem alten Galaxy S5, auf dem ein Android 7 werkelt, nur im Chrome nicht sichtbar gewesen ist. Warum genau es nur in dieser Konstellation nicht sichtbar gewesen ist weiß ich nicht, aber konnte das Problem recht einfach lösen.
Der CSS-Code für den betroffenen Div-Containers sah wie folgt aus:
|
1 2 3 4 5 6 7 8 |
.fotos { background: url("../images/background.jpg"); width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; } |
Der Fehler lag einzig und allein an der Dateigröße oder Auflösung der Bilddatei. Leider hatte ich die Original-Datei von Pixabay, mit einer Größe um die 6 MByte und einer Auflösung von irgendwas um die 5000 x 4000 Pixel, statt der komprimierten Version mit einer Auflösung von 2000 x 1800 Pixeln fürs Web hochgeladen. Von der Ladedauer her fiel dies aber gar nicht ins Gewicht. Weder im Firefox noch im Chrome auf dem Computer gab es irgendwelche Probleme. Ebenfalls wurde die Seite auf einem Galaxy S7 im Chrome und Firefox korrekt dargestellt, sowie auch im Firefox auf dem Problem-Handy.
Da das S5 ein kleineres Display hat vermute ich, dass es ein Problem wegen der recht hohen Auflösung beim Skalieren auf die Breite des kleineren Displays gegeben hat. Komischerweise aber nur im Chrome. Wie dem auch sei war die Dateigröße sowieso ein No-Go.
