Shadows in mobile

[mikhailovSvyat]

[mikhailovSvyat]

IOS вешает тени на то что считает textfield. Вроде есть два вариант

1. Убить у input[type="text"] свойство appearance, appearance: none;
2. Подхачить инпуты с помощью background-clip: padding-box;

На stakeoverflow отключают свойство
https://stackoverflow.com/questions/23211656/remove-ios-input-shadow

Но вот тут чуваки вроде говорят, что не стоит отключать
necolas/normalize.css#635

Оба варианта потестил, оба работают. Что выбрать не знаю)

[pacahon]

Я думаю тут проблема в том, что "дефолтные" настройки не стандартизированы спецификацией, например, есть вот такая штука https://www.w3.org/TR/css-ui-3/#default-style-sheet Там явно сказано informative, поэтому полный set этих настроек для какого-либо элемента ты никогда не знаешь, а appearance: none их полностью отрубает. Вот, например, что Chrome добавляет

В Firefox будут свои настройки, в Safari свои. Да и у меня нет уверенности, что это именно нужный set настроек даже для хрома %). Куда надёжнее взять все computed css values и найти diff для appearance: none и appearance: textfield.
ИМХО, сейчас всё работает как надо, кроме iOS, поэтому я бы внёс изменение локально. Попробовал бы следующий алгоритм

1. Лезем в devtools в safari и смотрим, какие стили он накидывает по-умолчанию (надёжнее посчитать diff значений css при смене none -> textfield)
2. Начинаем по очереди их переписывать, либо отрубать. Если должный эффект наступает, то переписываем конкретное свойство.

Начать, конечно, с background-clip. Я хз, что оно там клипает, выглядит же всё как тень.