Marco: css radial-gradient unter ios nicht verfügbar

Beitrag lesen

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