CSS webkit radial + iPad (Safari Mobile) не работает

Question

Я озадачен в данный момент.Я получил этот градиент

background-image: -webkit-radial-gradient(50% 65%, ellipse cover, #f2f2f4, #201935 55%);

Он работает в Safari, работает в Safari, изменяя пользовательский агент на

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5

, который точно такой же веб-набор и браузер, что и в iPad

Но когда я загружаю его на сам ipad, он не работает, их форумы говорят, что webkit получил поддержку ... может кто-нибудь помочь мне заставить его работать?

или кто-то может мне помочьполучить тот же результат с WebKit-градиентом (я не могу добиться чего-то, что приспосабливается к изменению размера, а также радиального градиента или формы эллипсоида), потому что, очевидно, есть поддержка для обоих?

Answer 1

Вы можете указать градиент, используя более старый синтаксис WebKit, например:

background-image: -webkit-gradient(radial, 50% 65%, 0, 50% 65%, 200, color-stop(0, #f2f2f4), color-stop(55%, #201935));

К сожалению, вы не можете указать процент для радиуса точки.

Answer 2

Per https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW1

Для свойств -webkit-linear-Gradient и WebKit-Radial-Gradient требуется iOS 5.0 или более поздняя версия или Safari 5.1 или более поздняя версия на рабочем столе.Если вам требуется поддержка более ранних выпусков iOS или Safari, см. « Предыдущий синтаксис (-webkit-градиент) .»

Answer 3

Я считаю, что это проблема с версией webkit, используемой в настоящее время в iOS.

У Desktop Safari также были проблемы с радиальными градиентами до версии 5.1.

Изменение пользовательского агента настольного Safari на 5.0, насколько я понимаю, изменяет только строку пользовательского агента, сообщаемую браузерам, а не используемым механизмом рендеринга.радиальные градиенты в настоящее время недоступны на iOS, и это также проблема на планшетах, которые я тестировал на Android 3.2.

Хорошая новость заключается в том, что мы в скором времени ожидаем обновления ОС для iOS и Androidнадеюсь, эта проблема просто исчезнет.

Если вам действительно нужны радиальные градиенты между сейчас и iOS 5 и Android 4, вам придется прибегнуть либо к фоновым изображениям, либо к SVG.: (

(Если кто-нибудь знает хитрость CSS, чтобы обойти это, я бы тоже очень хотел это услышать.)