css radial-gradient unter ios nicht verfügbar

[Marco]

Guten Tag, ich habe ein Problem mit radial-gradients unter ios. Dort betrifft es alle gängigen Browser (Firefox, Edge, Opera, Chrome, Safari etc.) Die farbigen Kreise werden unter ios nicht angezeigt. Stattdessen bekommt der Hintergrund irgendeine Farbe aus den zur Auswahl stehenden radial-gradients. Das ergibt überhaupt keinen Sinn. Es tritt auf allen ios-Geräten in meinem Haushalt auf (IPad, Iphone). Komischerweise besteht das Problem unter Android und Windows nicht (gleiche Browser) und funktioniert einwandfrei. Ich komme aber nicht weiter und weiß auch nicht woran es bei den Apple-Geräten liegt.

ich hoffe jemand hat einen Tipp für mich.

Folgenden Code betrifft es:

body {
   background-image:
        radial-gradient(circle 8vw at 50% 65%, rgb(255, 143, 87) 100%, transparent 0),
        radial-gradient(circle 16vw at top right, #343434 100%, transparent 0),
        radial-gradient(circle 50px at 75% 30%, rgba(255, 95, 15, 0.868) 100%, transparent 0),
        radial-gradient(circle 6vw at 60% 30%, rgb(55, 55, 55) 100%, transparent 0),
        radial-gradient(circle 10vw at 85% 60%,  rgba(90, 90, 90, 0.868) 100%, transparent 0);

    -webkit-backdrop-filter: blur(50px);
    -moz-backdrop-filter: blur(50px);
    -o-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    -webkit-background-position: bottom center;
    -moz-background-position: bottom center;
    background-position: bottom center;
    -o-background-position: bottom center;
    -webkit-background-repeat: no-repeat;
    -moz-background-repeat: no-repeat;
    background-repeat: no-repeat;
    -o-background-repeat: no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-background-attachment:fixed;
    -moz-background-attachment:fixed;
    -o-background-attachment:fixed;
    background-attachment:fixed;
}

[Matthias Scharwies]

Servus!

Guten Tag, ich habe ein Problem mit radial-gradients unter ios. Dort betrifft es alle gängigen Browser (Firefox, Edge, Opera, Chrome, Safari etc.) Die farbigen Kreise werden unter ios nicht angezeigt. Stattdessen bekommt der Hintergrund irgendeine Farbe aus den zur Auswahl stehenden radial-gradients. Das ergibt überhaupt keinen Sinn. Es tritt auf allen ios-Geräten in meinem Haushalt auf (IPad, Iphone). Komischerweise besteht das Problem unter Android und Windows nicht (gleiche Browser) und funktioniert einwandfrei. Ich komme aber nicht weiter und weiß auch nicht woran es bei den Apple-Geräten liegt.

ich hoffe jemand hat einen Tipp für mich.

Folgenden Code betrifft es:

body {
   background-image:
        radial-gradient(circle 8vw at 50% 65%, rgb(255, 143, 87) 100%, transparent 0),
}

Probier' mal, ob es mit

radial-gradient(circle 8vw at 50% 65%, rgb(255, 143, 87) 100%, transparent 100%)

besser geht. Dann müsstest du das transparent 0 eben austauschen.

Zum Nachlesen: CSS/Tutorials/Hintergrund/Verläufe

Herzliche Grüße

Matthias Scharwies

BTW: Die ganzen vendor-prefixes (-moz-, -o-, -webkit-) brauchst du nicht mehr!

[Matthias Scharwies]

Servus!

BTW: Die ganzen vendor-prefixes (-moz-, -o-, -webkit-) brauchst du nicht mehr!

Lesetipp: The slow death of CSS vendor prefixes (fullystacked.net)

Herzliche Grüße + schönes Wochenende

Matthias Scharwies

[Gunnar Bittersmann]

@@Marco

ich hoffe jemand hat einen Tipp für mich.

Ja, hab ich: Erstelle eine Testseite!

Folgenden Code betrifft es:

Du erwartest nicht, dass ich und jeder andere, der dir vielleicht helfen will, den Code kopiert und seine eigene Testseite erstellt? Das ist deine Aufgabe.

Kwakoni Yiquan

[Rolf B]

Hallo Marco,

Code bitte mit ~~~ einschließen. Hinter dem ersten CSS noch die Sprache nennen, also vorneweg ~~~css und am Ende ~~~. Ich habe das für Dich ergänzt.

background-position, background-repeat, background-size und background-attachment sind schon sehr alt. Dafür brauchst Du die Herstellerpräfix-Versionen nicht mehr. Bevor Du für eine Eigenschaft Herstellerpräfixe runterbetest, überzeuge Dich bei MDN oder caniuse.com, ob das wirklich noch nötig ist oder ob Du baseline-Eigenschaften verwendest.

Aber warum iOS nicht tut, sorry. Keine Ahnung. Alles was Du verwendest, sollte unterstützt werden. Du könntest versuchen, Dich ranzutasten: erstmal nur ein Kreis, ohne radial-gradient Stack. Welche iOS Version läuft auf den betroffenen Geräten, welche Versionen der genannten Browser verwendest Du?

background-position und background-size:cover haben bei mir übrigens keine Wirkung. Das betrifft Hintergründe, die intrinsische Größen haben, meine ich.

Damit andere iOS Nutzer das ausprobieren können, solltest Du versuchen, die problematische Seite online bereitzustellen. Codepen oder jsFiddle auf einem Touch-Gerät ist unlustig.

Rolf

[Marco]

Zunächst erstmal vielen Dank für eure schnellen Antworten. Leider brachten auch die transparent 100% nicht den gewünschten Erfolg.

Ich habe jetzt mal eine Testseite hochgeladen.

Die ios-Geräte verwenden die aktuellste UI-Version und auch die Browser sind vollständig up to date.

Ich habe keine Ahnung voran das liegen soll. Vielleicht spüren die Geräte, dass ich Android und Windows lieber mag 😀.

Ich bin für jeden Tipp dankbar.

Liebe Grüße Marco

[Matthias Scharwies]

Servus!

Ich habe jetzt mal eine Testseite hochgeladen.

vielen Dank!

Da ist aber wieder der gleiche Fehler wie vorhin: Du hast viele Eigenschaften und irgendetwas funktioniert nicht!

@Rolf B schlug vor:

Du könntest versuchen, Dich ranzutasten: erstmal nur ein Kreis, ohne radial-gradient Stack.

Das habe ich gemacht:

body {
	background-color: black;
  background-image:
		radial-gradient(circle 80px at 50% 65%, rgb(255 143  87/ 0.5) 100%, transparent 100%),
    radial-gradient(circle 16vw at top right, gold 100%, transparent 100%);
	background-repeat: no-repeat;
}

Einen Kreis habe ich auf px geändert; die alte Syntax bei rgb() durch die neue ersetzt; beim anderen einfach den Farbnamen gold eingesetzt. Von den untenstehenden Eigenschaften Deiner Seite hatte ich mit dem Inspektor alles probeweise weggeklickt -> keine Änderung am Ergebnis; also weg damit außer dem background-repeat!

Das div mit height:200vh stört mich; ich hab's auf 50vh gesetzt.

Und so sieht's im iPhone aus!

Die Kreise sind da, aber sehr blaß! ?

Ich habe jetzt den background-color entfernt / auf weiß gesetzt.

radial-gradient(circle at 50% 65%, rgb(255 143  87/ 0.5) 80px, transparent 80px),
radial-gradient(circle at 30% 30%, gold 16em, white 16em);

Ich habe jetzt die Größe des Kreises durch die color-stops realisiert, so funktioniert es.

Test

[EDIT] Die spec und auch die Übersicht im MDN scheinen eine Größenangabe zwischen shape und position zuzulassen. Allerdings habe ich noch nie ein Beispiel damit gesehen, evtl. solltest du die Größe der Kreise eben doch in den color-stops festlegen.

Das erklärt aber nicht die blassen Farben, besonders beim flächig gefüllten gold. [/EDIT]

Aber du brauchst jemanden mit einem MacBook zum Testen.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

https://stackoverflow.com/questions/54006038/background-colorrgba-safari-transparency-css-bug

Sehr merkwürdig

Herzliche Grüße

Matthias Scharwies

[Marco]

Vielen Dank für die Mühe. Leider führt auch dieses Ergebnis auf meinen Geräten nicht zum gewünschten Erfolg. Jetzt habe ich halt einen goldenen Hintergrund. Nur eben keine Kreise.

Noch eine kurze Anmerkung: Ich hatte vor meiner ersten Anfrage hier bereits ca. 70 verschiedene Versionen getestet um das Problem selbst zu lösen. Am Ende war ich bei nur noch einem Kreis, den ich wiederum in vielen verschiedenen Größen, und Positionen angeordnet hatte. Immer mit dem gleichen Ergebnis. Auch wenn es nur ein Kreis ist, ist es meinen IOS-Geräten egal wie groß er ist oder wo er positioniert ist. Er wird als Hintergrundfarbe ausgegeben. Auf dem kompletten Screen.

Es begtrifft ein Iphone SE2, Ipad 6, Ipad 7, Ipad 9.

Alle Android und Windowsgeräte machen was sie sollen.

[Rolf B]

Hallo Marco,

dieses Streifenbild hatte ich bei meinem ersten Test auch. Es passierte, als ich meinem Body keinen Inhalt gegeben hatte... - äh, also, dem Body meiner HTML Seite natürlich. Da hatte er eine Höhe von 0, den no-repeat hatte ich auch vergessen, und dann kam sowas raus.

Gibt es für iOS Geräte keine Möglichkeit, Entwicklerwerkzeuge zu nutzen? Das muss irgendwas ganz blödes sein.

Er wird als Hintergrundfarbe ausgegeben. Auf dem kompletten Screen.

Das ist ja nun ein Irrtum. Man sieht teilweise orange und teilweise schwarz. Wenn ich mein Handy quer drehe, wird der „rosa“ Kreis unten abgeschnitten. D.h. dein Body nimmt nicht die ganze Höhe des Viewports ein.

Hast Du mal auf die Angaben in vw/vh verzichtet und stumpf px verwendet? Hast Du die <meta viewport> Angabe drin? Ich krieg deine Seite hier nicht aufgerufen, weil der Hostname nicht mit dem im Zertifikat übereinstimmt, deswegen kann ich nicht selbst gucken (Host: test.bewops.de, Allgemeiner Name: dogado.de)

Fun Fact: Ich habe bei dogado.de nach bewops.de gesucht und bekam Umzugsangebote, weil bewops.de ja schon weg sei. Beste Alternative: bewo.ps. .ps wie Palästina. Für 8,39 € im Monat. Ein Schnäppchen!!!

Rolf

[Matthias Scharwies]

Servus!

Noch eine kurze Anmerkung: Ich hatte vor meiner ersten Anfrage hier bereits ca. 70 verschiedene Versionen getestet um das Problem selbst zu lösen. Am Ende war ich bei nur noch einem Kreis, ... Immer mit dem gleichen Ergebnis.

Ja, aber …

1. die CSS-Funktion gibt es seit mind. ca. 2015 bei SELFHTML. Meinst du nicht dass sich irgendjemand beschwert hätte, wenn er dieses Beispiel auf einem iPhone (nicht grade selten) nicht zu sehen bekommen hätte?
   CSS/Tutorials/Hintergrund/Verläufe#Radiale_Farbverläufe
   Meinst du nicht, dass es dann bei Stack Overflow, dem MDN oder woanders irgendwelche Beschwerden gegeben hätte?

2. Das Minimalbeispiel würde ich eben minimal aufbauen!
   Zuerst vielleicht keine 200vh, sondern eben:

#eins { 
   background-image: 
    radial-gradient(red 30%, white 30%); 
}
#zwei { 
  background-image: 
    radial-gradient(circle, red 30%, white 30%); 
}
#drei { 
  background-image: 
    radial-gradient(circle at 100% 0%, red 25%, white 75%); 
}

body {
  width: 90vw;
  height: 90vh;
  border: thin solid;
}

Jetzt ist der body eben 100% sichtbar und hat keine Scrollbalken oder versteckten Seiteninhalte - er ist aber auch nicht 0 hoch.

Und jetzt den ersten Verlauf probieren - klappt's?

Und jetzt ein Schlüsselwort nach dem anderen einfügen - klappt's immer noch?

Und irgendwann bist du wohl bei den rgb()-Funktionen. Da hattest du die alte Syntax verwendet. Normal nicht schlimm, aber bei Safari 12 (und in neueren Versionen) vielleicht doch?

Wenn du Schwarz als Hintergrund gesetzt hast, könntest du dir den halbtransparenten Farbton mit einem Color-Picker holen und als Hex-Wert notieren, klappt's dann?

Ich geh' bei sowas erst mal raus (Heute nicht) und fang' dann am nächsten Tag wieder frisch an!

Gib nicht auf!

Herzliche Grüße

Matthias Scharwies

[Marco]

Vielen, vielen Dank Rolf und Matthias. Ihr habt mich auf den richtigen Weg gebracht.

Mit den IDs eins, zwei, drei hat alles funktioniert. Der Fehler lag in den 100% für den ersten Farbwert und dann nochmal 100% für transparent.

Nehme ich den ersten Farbwert auf 99% und belasse transparent auf 100% funktioniert es. haha... genial. Er kam also nur nicht mit zweimal 100% klar.

Ich hatte es ganz am Anfang mit den ersten Farbwerten auf weniger als 100% versucht, hatte da aber noch transparent auf 0 (nicht auf 100%). Da hat es also auch nicht funktioniert. Tatsächlich muss es so lauten:

background-image: 
                radial-gradient(circle 8vw at 50% 65%, rgb(255 143 87) 99%, transparent 100%),
                radial-gradient(circle 16vw at top right, #343434 99%, transparent 100%),
                radial-gradient(circle 50px at 75% 30%, rgba(255, 95, 15, 0.868) 99%, transparent 100%),
                radial-gradient(circle 6vw at 60% 30%, rgb(55, 55, 55) 99%, transparent 100%),
                radial-gradient(circle 10vw at 85% 60%,  rgba(90, 90, 90, 0.868) 99%, transparent 100%);

Folglich ist es die Kombination aus zwei Prozentwerten, die nicht beide gleich 100 sein dürfen. Dann funktionierts. Auch transparent 0 mag er nicht. Gut zu wissen. Mega. Ich freue mich riesig. Bin fast verzweifelt.

Vielen lieben Dank nochmal und einen schönen Abend wünscht

Marco

PS: bewops.de ist noch im Aufbau...

[Matthias Scharwies]

Servus!

Vielen, vielen Dank Rolf und Matthias. Ihr habt mich auf den richtigen Weg gebracht.

Super, dass es geklappt hat!

Mit den IDs eins, zwei, drei hat alles funktioniert. Der Fehler lag in den 100% für den ersten Farbwert und dann nochmal 100% für transparent.

Nehme ich den ersten Farbwert auf 99% und belasse transparent auf 100% funktioniert es. haha... genial. Er kam also nur nicht mit zweimal 100% klar.

Ja, wobei du da einen (fast nicht merkbaren) weichen Übergang hast.

Es ist möglich 2 gleiche Werte für eine scharfe Kante zu verwenden, aber anscheinend darf im iOS der erste color-stop nicht schon bei 100% liegen.

Das ist ja (im Nachhinein) klar. Interesant, dass die anderen Browser das irgendwie berechnen.

Ich persönlich würde die Werte für den Kreis in den color-stop packen.

PS: bewops.de ist noch im Aufbau...

Dann hast du ja noch was zu tun! Viel Erfolg!

Herzliche Grüße

Matthias Scharwies