Seite 1 von 3
Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 09:12
von stobi_de
Mal wieder so eine Frage, die ich auch woanders gestellt habe.
Ist aber ein Thema, was sich seit Jahren durch meine Projekte zieht und was ich nie habe irgendwie vernünftig lösen können.
Auf dem IPhone kommt es immer wieder mal vor, das Background-Size: cover und background-attachment:fixed dazu führen, dass das Hintergrundbilder in gigantischer Größe angezeigt werden und daher völlig unbrauchbar werden.
Grund dafür: es wird nicht der Viewport (also die reale Bildschirmgröße) als Basis zur Bildgröße-Berechnung herangezogen, sondern die Dokumentengröße (also die Höhe der Website). Eine sonderbare Sache - ist aber so.
Nun gibt es hier ansatzweise eine Lösung mit body:after, was man auch auf eine section anwenden kann.
https://stackoverflow.com/questions/241 ... ing-on-ios
Das hat allerdings sonderbare Nebeneffekte - jedenfalls in Mobi. So sind die Hintergründe von Textfeldern ebenfalls "irgendwie" betroffen
Vielleicht kennt ja jemand hier eine brauchbare Lösung
Die Konkurrenz kann das (das diente ja als Vorlage zu dieser Seite)
https://www.ml-architekten-engineering.de/
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 09:34
von Tommy Herrmann
Das ist doch vollkommen OK (solange Du es erwähnst ist das kein Crossposting) - Du brauchst da ja auch Hilfe ...
Ohne IPhone ist aber blöd und diesen Test-Programmen traue ich nicht wirklich.
Eigentlich sollte das doch schon einem Mac-Benutzer im Hersteller-Forum mal aufgefallen sein. Ich glaube fast, dass das an den Skripten da bei Dir im Header liegen könnte.
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 09:49
von stobi_de
Der Lambda-Test funktioniert schon zuverlässig, da da anscheinend echte Geräte hinterstehen.
Sieht jedenfalls genauso aus, wie bei dem Screenshot, den ich von einer Fachfrau bekommen habe.
Ist auch nur beim IPhone so, nicht beim Safari im Allgemeinen.
=========
Habe das Script zum Tageszeit-Wechsel entfernt. Klappt immer noch nicht
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 11:30
von Tommy Herrmann
Nur für den Fall, dass jemand anderes gucken will - es geht um diese Seite:
https://www.pfrommer-gmbh.de/
Ich meinte
nicht das Wechselbilder-Skript, da gibt es doch jede Menge fremde CSS und auch JS wie z.B. das hier:
https://www.pfrommer-gmbh.de/WOW-master/dist/wow.min.js
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 12:13
von Tommy Herrmann
Diese Testseite "
lambdatest.com", die Du genannt hattest, scheint ja wirklich sehr gut zu sein. Man kann ja dort quasi jedes Gerät in jeder Kombination testen:
https://app.lambdatest.com/
Ich konnte die oben genannte Seite auch eben nochmals am richtigen "IPhone 11" ansehen, das Problem stellt sich dort exakt genau so dar wie auf dieser Testseite.
Wenn ich dort allerdings meine Mobirise5 Seite mit den Wechselbildern betrachte:
https://www.mobirise-tutorials.com/Tuto ... ilder.html
...
geht jedoch alles.
Daher liegt es wohl
weder an dem Header-Block von Mobirise noch an dem
Wechselbilder-Skript vom Werner und auch
nicht an der CSS:
background-size: cover;
Hast Du mal den "Cookie Alert" von Mobirise raus genommen?
Es müsste also an irgendeiner von Dir zusätzlich verwendeten CSS oder einem von Dir zusätzlich verwendeten JavaScript liegen. Du verwendest das doch für diese Overlay-Effekte und die Text-Blöcke.
Da wird wohl das Problem liegen!
Du kannst das eigentlich nur finden, wenn Du diesen Header nochmals nachbaust und von gar keinem Skript dann nach-und-nach alles einbaust, was Du auf der betroffenen Seite getan hast.
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 12:19
von Tommy Herrmann
... obwohl - meine Testseite mit dem "Cookie Alert" von Mobirise:
https://www.mobirise-tutorials.com/Test ... ite-Blank/
... wird auch
korrekt angezeigt - der ist es dann ja auch nicht:
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 12:31
von stobi_de
Es liegt and der Kombi fixed und Cover.
Eines von beiden bezieht sich beim IPhone auf die Seitenhöhe und nicht den Viewport.
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 12:32
von Tommy Herrmann
ich habe so eine Seite - warte ich teste das auch mal.
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 12:35
von Tommy Herrmann
Ja - es liegt eindeutig am "fixed":
background-attachment: fixed;
https://www.mobirise-tutorials.com/Busi ... xiert.html
Nimm das doch einfach raus - braucht doch kein Mensch
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 12:39
von Tommy Herrmann
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 13:01
von stobi_de
Na, sowas Ähnliches habe ich gerade eingebaut - läuft.
Da bei mir das Bild in 3 aufeinanderfolgenden Blöcken liegt, hat mich zuerst der Z-Index etwas wahnsinnig gemacht, weil ich falschrum dachte.
Nun zur Perfektion: Wernes Javascript zur Tageszeit-Bilderwechsel so anpassen, dass es auch auf :after (also in Deinem Beispiel :before) angewendet wird und nicht als Style.
Da suche ich noch...
=======
Der Kunde findet es klasse, dieses feststehende Bild am Anfang (ich auch)
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 13:02
von Tommy Herrmann
Habe das mal hier eingebaut:
https://www.mobirise-tutorials.com/Busi ... xiert.html
> Hintergrund "Background Color" wählen
> Hintergrund händisch auf transparent stellen (siehe Screenshot)
> dann diese CSS mit absoluter URL
Code: Alles auswählen
div::before {
content: ' ';
display: block;
background-image: url('https://www.mobirise-tutorials.com/BusinessM4/images/Kette.jpg');
background-position: center;
background-size: cover;
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -10;
}
Test:
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 13:24
von stobi_de
Läuft nun auch beim Pfrommer.
Aber das Zeit-Wechselbild noch nicht
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 13:24
von Tommy Herrmann
Jetzt habe ich alle meine freien Test verballert - nun wollen sie Geld
https://app.lambdatest.com/
Bei dem Wechselbild kann ich Dir leider nicht helfen ...
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 13:56
von stobi_de
Melde Dich neu an mit anderer Mailadresse und anderer IP
Das mit dem Wechselbild ist sehr schwierig
Oh Mist: es kollidiert mit dem fixen Video. Glücklicherweise mir aufgefallen vor dem Kunden!
www.pfrommer-gmbh.de/test
Das ist jetzt übel.
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 14:01
von Tommy Herrmann
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 14:10
von Tommy Herrmann
... warum wendest Du das Wechselbilder-Skript nicht einfach genau wie auf meiner Tutorialseite beschrieben an? Da gibt's keinen After - weder vorne noch hinten
https://www.mobirise-tutorials.com/Tuto ... ilder.html
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 15:18
von stobi_de
Aber dann haben wir doch wieder die IPhone-Geschichte!
Das Ding ist doch fixed für 3 Blöcke untereinander!
Ich glaube, das wird mir zu kompliziert
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 15:26
von Tommy Herrmann
... ich habe jetzt Deine Seite "nicht so im Kopf" wie Du - aber da ist doch nichts "fixed":
Code: Alles auswählen
header {
position: relative;
background-color: black;
height: 100vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header #bild {
position: absolute;
z-index: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center center;
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.1;
z-index: 1;
}
... aber wenn es dan "fixed" sein soll, dann müsste man die neue CSS dort dann doch auch mit einpflegen können - also beim Selektor:
header #bild
Re: Background-size:cover auf IPhone
Verfasst: Fr 23. Dez 2022, 15:50
von stobi_de
Ich glaube, ich fange nochmal vom Stand heute morgen an.
https://www.pfrommer-gmbh.de/
Wenn Du da rein schaust, siehst Du, dass das Video im unteren Teil der Seite fixed ist, genauso, wie das Hintergrundbild über die ersten 3 Blöcke,
Genau so hatte ich das dem Herrn Pfrommer zugesagt und so, wie es auch in der Beispielseite ist.
Verdammt peinlich für mich!!!