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.
[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
Was ist eine Signatur?