-webkit-autofill не работает в Chrome для IOS

Question

-webkit-autofill псевдо-класс отлично работает в Desktop Chrome, но не работает в Mobile Chrome (IOS)

У меня есть собственная структура-заполнитель с плавающей точкой, и я хочу, чтобы она поддерживала автозаполнение Chrome (которое заполняет форму при загрузке страницы или из диалогового окна)

Итак, я добавил этот код:

 #{$all-text-inputs} {
      &:-webkit-autofill + #{$this}-placeholder {
        left: 0;
        right: 0 ;
        transform: translateY(-34px);
        @include text(big, $lh: 1.3em, $fw: fw(regular));
        opacity: 1;
      }
  }

Это работает, как и ожидалось, в Chrome Desktop: -webkit-autofill запускается и заполнитель идет вверх

Но, похоже, псевдокласс не работает в Chrome Mobile (IOS)

Структура ввода:

<div class="input input-with-float-placeholder">
 <div class="input-inner">
  <input type="email">
  <span class="input-placeholder">Username</span>
 </div>
</div>

Answer 1

Хм.Это интересный вопрос, поскольку Chrome ( Blink ) поддерживает эту функцию веб-набора, а другие движки - нет.

Если вы не ориентируетесь только на Chrome (что может быть), это может быть целесообразноидти в другом направлении.:-webkit-autofilll не относится ни к одной из стандартов и не является частью какой-либо спецификации.Что-то думать о.Вы гарантированно получите совершенно разные результаты на разных платформах, как указывает ваш вопрос.

Более того, мобильный Chrome на iOS, похоже, использует iOS WKWebView ** - который не поддерживает эту нестандартную функцию webkit.Насколько я понимаю, WKWebView поддерживает только функции, доступные для iOS Safari.(Хотя доступность API WKWebView стала серьезным шагом вперед для сторонних браузеров на iOS, он по-прежнему! = Движок рендеринга Blink в Chrome.)

** Не думаю, что это изменилось за последниепару лет, и ваш опыт подсказывает, что это не так.

См .:

1. Разница между Chrome для iOS и Chrome для Android
2. https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill