Background-size:cover auf IPhone

Allgemeine Fragen
stobi_de
Moderator
Moderator
Beiträge: 730
Registriert: Di 11. Okt 2022, 06:30

Background-size:cover auf IPhone

Ungelesener Beitrag 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/
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5747
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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.
stobi_de
Moderator
Moderator
Beiträge: 730
Registriert: Di 11. Okt 2022, 06:30

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5747
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5747
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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.


2022-12-23 lambdatest.com IPhone12.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5747
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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:


2022-12-23 lambdatest.com IPhone12 mit Cookie-Alert.jpg
stobi_de
Moderator
Moderator
Beiträge: 730
Registriert: Di 11. Okt 2022, 06:30

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5747
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Background-size:cover auf IPhone

Ungelesener Beitrag von Tommy Herrmann »

ich habe so eine Seite - warte ich teste das auch mal.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5747
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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 :D


2022-12-23 lambdatest.com IPhone12 mit fixiertem Hintergrundbild.jpg
stobi_de
Moderator
Moderator
Beiträge: 730
Registriert: Di 11. Okt 2022, 06:30

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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)
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5747
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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;
}

Code-Editor.jpg


Test:


2022-12-23 lambdatest.com IPhone12 mit fixiertem Hintergrundbild für IPhone.jpg
stobi_de
Moderator
Moderator
Beiträge: 730
Registriert: Di 11. Okt 2022, 06:30

Re: Background-size:cover auf IPhone

Ungelesener Beitrag von stobi_de »

Läuft nun auch beim Pfrommer.
Aber das Zeit-Wechselbild noch nicht
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5747
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Background-size:cover auf IPhone

Ungelesener Beitrag von Tommy Herrmann »

Jetzt habe ich alle meine freien Test verballert - nun wollen sie Geld :eek: :aufsmaul:

https://app.lambdatest.com/

Bei dem Wechselbild kann ich Dir leider nicht helfen ...
stobi_de
Moderator
Moderator
Beiträge: 730
Registriert: Di 11. Okt 2022, 06:30

Re: Background-size:cover auf IPhone

Ungelesener Beitrag von stobi_de »

Melde Dich neu an mit anderer Mailadresse und anderer IP :D
Das mit dem Wechselbild ist sehr schwierig :eek:

Oh Mist: es kollidiert mit dem fixen Video. Glücklicherweise mir aufgefallen vor dem Kunden!
www.pfrommer-gmbh.de/test
Das ist jetzt übel.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5747
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Background-size:cover auf IPhone

Ungelesener Beitrag von Tommy Herrmann »

nee - ich teste erst wieder im Januar :D :anmachen: :prost:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5747
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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 :D

https://www.mobirise-tutorials.com/Tuto ... ilder.html
stobi_de
Moderator
Moderator
Beiträge: 730
Registriert: Di 11. Okt 2022, 06:30

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5747
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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

:confused:
stobi_de
Moderator
Moderator
Beiträge: 730
Registriert: Di 11. Okt 2022, 06:30

Re: Background-size:cover auf IPhone

Ungelesener Beitrag 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!!!
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot] und 27 Gäste