Question

-webkit-autofill 伪类在台式机Chrome中工作正常，但在Mobile Chrome（IOS）中不工作

我有一个自定义的float占位符框架，我希望它支持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桌面中按预期工作：-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

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:

-webkit-autofill在Chrome for IOS中不起作用

1 个答案: