CSS放射状グラデーションブラウザの違い

Question

私はSafariや他の人に異なるが大幅に違って見える本当に簡単CSSの放射状の勾配を、持っている：

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

<div></div> 

すべてのアイデア、私はそれらすべてが、Safariのバージョンのように見えるようにできますか？

Safari       Firefox 

フィドル：https://jsfiddle.net/2234zy6o/3/

Answer 1

私は最終的に簡単な解決策を見つけた：Safariは独自のスタイルを必要とします：

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% 
); 

は、それはまだ同じですが、非常に類似していないだ - 少なくとも私はそれと一緒に暮らすことができます。