Почему box-shadow в Safari на iOS отображается некорректно?

Question

[Александр Коновалов]

Здравствуйте! Добавляю к кнопке тень: box-shadow: 0 10px 10px rgba(216,46,55,35%);. На ПК отображается как надо, а на iOS в Safari она вместо красного цвета - белая. Почему?

Comments

[Lord_Dantes]

Кнопка ссылкой?

[Lord_Dantes]

Можно скриншот?

[Александр Коновалов]

Slave,

<a href="#booking"><div class="btn-stock">Заказать квартиру</div></a>

[Lord_Dantes]

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

[Александр Коновалов]

Slave, последняя

[Александр Коновалов]

Slave, именно с цветными такое происходит

[Александр Коновалов]

Рустам Байназаров, именно в этом и была причина. Спасибо!

Answer 1

[Rustam Bainazarov]

Добавляйте значение альфа-канала вот так (можно без нуля):
rgba(216, 46, 55, 0.35)

Я даже не уверен, что этот ваш код с процентами вообще валидный, потому что вижу такое написание впервые.

Update. Код невалидный. Значение в процентах само по себе писать можно, но делается это так:
rgba(216, 46, 55 / 35%)

Ссылка на информацию с MDN.

Update 2. Как правильно отметил RAX7, такой синтаксис, даже исправленный (со знаком процентов через черту), вообще не работает в IE, EDGE и Safari.

Comments

[RAX7]

И все же валидный код с процентами выглядит вот так:

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /* 40% opaque green */ 
rgba(51 170 51 / 40%)    /* 40% opaque green */

Safari, Edge, IE такой синтаксис не понимают

[Rustam Bainazarov]

RAX7, надо добавить в ответ, спасибо!

Answer 2

[Дмитрий Чайников]

А еще проблема может быть в том, что Safari под Windows не обновлялся с 2012 года.
В данном случае рекомендую использовать цветовую палитру HEX, т.е. #d82e3759 и отдельно задавать CSS-стильopacity: .35;