CSS 방사형 그라디언트 브라우저 차이

Question

나는 사파리 등의 여러에서 유의 한 차이를 보이는 정말 간단 CSS 방사형 그라데이션을 가지고 :

<style> 
    body { 
    background: #000; 
    } 
    div { 
    height: 200px; 
    width: 200px; 
    background-image: radial-gradient(100px, #1493a4 0%, transparent 100%); 
    } 
</style> 

<div></div> 

모든 아이디어, 내가 그들 모두가 사파리 버전처럼 보이게 수있는 방법?

Safari       Firefox 

바이올린 : 나는 마침내 간단한 해결책을 발견 https://jsfiddle.net/2234zy6o/3/

Answer 1

가 :

background-image: -webkit-radial-gradient(#1493a4, transparent); 

것은 그냥 애프터 을 추가해야합니다 : 사파리는 자신 만의 스타일을 필요로 표준 정의를 사용하면 다른 브라우저는 표준 브라우저를 사용하고 0을 무시합니다, Safari는 처음에는 표시되지만 -webkit은 무시하고 표준을 무시합니다.

그러나 그럼에도 불구하고 똑같은 것은 아닙니다. 그래서 몇 가지 '보간'을했고, 일부 정지 추가 :

background-image: -webkit-radial-gradient(100px, 
    #1493a4 0%, 
    rgba(20,147,164,0.4) 40%, 
    rgba(20,147,164,0.2) 55%, 
    transparent 100% 
); 

그것은 여전히 ​​동일하지만, 매우 유사한을 아니에요 - 적어도 내가 살 수 있습니다.