Background-size:cover auf IPhone
Background-size:cover auf IPhone
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/
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/
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
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.
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
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
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
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
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
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
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
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.
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.
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
... 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:
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
Es liegt and der Kombi fixed und Cover.
Eines von beiden bezieht sich beim IPhone auf die Seitenhöhe und nicht den Viewport.
Eines von beiden bezieht sich beim IPhone auf die Seitenhöhe und nicht den Viewport.
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
ich habe so eine Seite - warte ich teste das auch mal.
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
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
background-attachment: fixed;
https://www.mobirise-tutorials.com/Busi ... xiert.html
Nimm das doch einfach raus - braucht doch kein Mensch
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
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)
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)
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
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
Test:
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
Läuft nun auch beim Pfrommer.
Aber das Zeit-Wechselbild noch nicht
Aber das Zeit-Wechselbild noch nicht
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
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 ...
https://app.lambdatest.com/
Bei dem Wechselbild kann ich Dir leider nicht helfen ...
Re: Background-size:cover auf IPhone
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.
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.
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
nee - ich teste erst wieder im Januar
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
... 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
https://www.mobirise-tutorials.com/Tuto ... ilder.html
Re: Background-size:cover auf IPhone
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
Das Ding ist doch fixed für 3 Blöcke untereinander!
Ich glaube, das wird mir zu kompliziert
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Background-size:cover auf IPhone
... ich habe jetzt Deine Seite "nicht so im Kopf" wie Du - aber da ist doch nichts "fixed":
... 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
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;
}
header #bild
Re: Background-size:cover auf IPhone
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!!!
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!!!
Wer ist online?
Mitglieder in diesem Forum: Bing [Bot] und 152 Gäste