CODEWITHSUNDEEP
htmlioscssgoogle-chromeautofill
Pavlo Zhuravlov
Pavlo Zhuravlov

Reputation: 373

-webkit-autofill is not working in Chrome for IOS

-webkit-autofill pseudo-class works fine in Desktop Chrome, but doesn't work in Mobile Chrome (IOS)

I have a custom float placeholder framework, and i want it to support chrome autocomplete (which fill the form on the page load or from the dialog)

So I added this code:

 #{$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;
      }
  }

This is working as expected in Chrome Desktop: -webkit-autofill fires and placeholder go to the top

But seems like this pseudo-class doesn't work in Chrome Mobile (IOS)

Input Structure:

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

Upvotes: 2

Views: 9573

Answers (1)

Donkey Shame
Donkey Shame

Reputation: 764

Hmm. It's an interesting question since Chrome (Blink) supports this webkit feature and other engines don't.

Unless you're targeting Chrome only (which you may be), it may be wise to go another direction. :-webkit-autofilll is not on any standards track and is not part of any specification. Something to think about. You are guaranteed to get wildly different results on differing platforms, as your question points out.

Moreover, mobile Chrome on iOS appears to use iOS's WKWebView** -- which doesn't support this non-standard webkit feature. My understanding is that WKWebView only supports features available to iOS Safari. (While the availability of the WKWebView API was a major step up for third-party browsers on iOS, it still != Chrome's Blink rendering engine.)

** I don't think that has changed in the last couple years, and your experience suggests it has not.

See:

  1. Difference between Chrome for iOS and Chrome for Android
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill

Upvotes: 2

Related Questions