Радиальный градиент CSS для Safari не работает

Question

Когда я использую этот фрагмент в Chrome, IE и Firefox, он работает отлично! Но на Safari это не работает.

Эта проблема происходит:

.circle-red { 
 
\t border: 2px solid; 
 
\t border-radius: 51%; 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t background: radial-gradient(ellipse at 80px 40px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 32%, rgba(255,255,255,0) 70%), linear-gradient(160deg, transparent 10%, red 30%); 
 
\t background-size: 87.5% 55%, 100% 100%; 
 
\t background-repeat: no-repeat; 
 
}

<div class="circle-red"></div>

Answer 1

Попробуйте это добавление WebKit префикс на вашей собственности фоне размера и на вашем фоне значения градиента. Вот пример:

.circle-red { 
    border: 2px solid; 
    border-radius: 51%; 
    width: 40px; 
    height: 40px; 
    background: radial-gradient(ellipse at 80px 40px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 32%, rgba(255,255,255,0) 70%), linear-gradient(160deg, transparent 10%, red 30%); 
    background: -webkit-radial-gradient(ellipse at 80px 40px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 32%, rgba(255,255,255,0) 70%), linear-gradient(160deg, transparent 10%, red 30%); 
    background-size: 87.5% 55%, 100% 100%; 
-webkit-background-size: 87.5% 55%, 100% 100%; 
    background-repeat: no-repeat; 
}