box-shadow не отображатся в мобильном устройстве

Question

Форма регистарции, в настольных браузерах выглядит как и задумано, а на мобильном (сафари, хром) Не отображаются тени блока. Причем ниже кнопка с тенями, там все ок, а вот поля ввода выглядят не корректно.

Это фрагмент верстки

        <form action="php/handlers/login.php" method="post">
            <p class="logout_title">Привіт, красуню!)</p><br>
            <input class="inp" type="text" name="auth_username" placeholder="логін">
            <input class="inp" type="text" name="password" placeholder="пароль">
            <div class="teeeest inp">uss</div>
            <input class="login_btn" type="submit" value="Увійти">
            <p>Не зареєстрована?<br>Звернись до <a target="blanc" href="https://t.me/marathon_TEST_bot">нашого бота</a></p>
        </form>

Это стили

:root {
  --neo_shadows:
    4px 4px 7px #0000001c,
    -4px -4px 4px #ffffff5e,
    4px 4px 7px #0000001c inset,
    -4px -4px 4px #ffffff5e inset;
}

#modal_auth_window form .inp {
  width: 200px;
  padding: 10px;
  border: none;
  color: var(--text);
  box-shadow: var(--neo_shadows);
  margin: 0 auto;
  background-color: var(--main_bg);
  margin-bottom: 10px;
  border-radius: var(--borad);
  text-align: center;
  outline: none;
}

Answer 1

Причин может быть несколко:

Стоит проверить версию мобильных браузеров (могут не поддерживать данное свойство стилей)
проверить адаптивность. Возможно, что некоторые теги меняются или пересекаются стили

советую использовать конкретные стили теней как отдельный переиспользуемый добавочный уникальный класс. Назовите его, например .shadowed-input и пропишите без маршрута (#modal_auth_window form), скорее всего, браузер просто не отлавливает его и не может применить. Так же, без маршрута в стилях, позднее вы сможете повторно добавить этот класс к любому инпуту (или вовсе .shadowed-box назвать и применять везде, где нужен). Проверил на codepen, сработали стили только после того, как я убрал эту "изоляцию"

Answer 2

Решенеи было найдено! Как оказалось мобильные браузеры у элементов пользовательского ввода убирают некторые стили. По этому обернул оба нинпута в обертку, задав ей те самые преславутые тени. При этом сам инпут сделал с прозрачным фоном)

Вот как стало в верстке:

<div class="inp_wrapper">
  <input type="text" name="auth_username" placeholder="логін">
</div>

Вот как стало в стилях:

#modal_auth_window form .inp_wrapper {
  color: var(--text);
  box-shadow: 4px 4px 7px #0000001c,
  -4px -4px 4px #ffffff5e,
  4px 4px 7px #0000001c inset,
  -4px -4px 4px #ffffff5e inset;
  margin: 0 auto;
  background-color: var(--main_bg);
  margin-bottom: 10px;
  border-radius: var(--borad);
}

#modal_auth_window form input {
  border-radius: var(--borad);
  text-align: center;
  background-color: transparent;
  outline: none;
  padding: 10px;
  border: none;
  width: 200px;
}

Теперь все отображаетя именно так как требовала ситуаия) Надеюсь кому то поможет)

БЛОГ НА HUSL

box-shadow не отображатся в мобильном устройстве

Ответы (2 шт):