CSS Radial Gradient различия браузера

У меня есть очень простой CSS радиальный градиент, который выглядит значительно отличается в разных в Safari и другие:CSS Radial Gradient различия браузера

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

<div></div>

Любые идеи, как я мог бы сделать их выглядеть как версия Safari?

Safari       Firefox

Fiddle: https://jsfiddle.net/2234zy6o/3/

источник

2016-06-01 Joachim Schirrmacher

Можете ли вы включить скриншоты вывода из Safari и другого браузера, чтобы мы могли проверить, видим ли мы ту же проблему? – Harry

Просто добавил их. :-) –

Кажется очень странным. Я проверил Safari (iOS), Chrome (Windows), и я вижу такое же поведение. Chrome работает как выход Firefox, тогда как Safari этого не делает. – Harry

Я наконец-то нашел простое решение: Safari необходим собственный стиль:

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

Просто убедитесь, чтобы добавить его после в стандартное определение, другие браузеры затем используют стандартный и игнорируют -webkit один, в то время как 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% 
);

Это еще не то же самое, но очень похожи - по крайней мере, я могу жить с этим.

источник

2016-07-22 08:18:39

CSS Radial Gradient различия браузера

ответ

Смежные вопросы