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

Question

-webkit-autofill 伪类在桌面 Chrome 中工作正常，但在移动 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

嗯。这是一个有趣的问题，因为 Chrome (Blink) 支持此 webkit 功能，而其他引擎不支持。

除非您仅针对 Chrome(您可能确实如此)，否则最好选择其他方向。 :-webkit-autofilll 不属于任何标准轨道，也不属于任何规范。值得思考的事情。正如您的问题所指出的，您肯定会在不同的平台上得到截然不同的结果。

此外，iOS 上的移动 Chrome 似乎使用 iOS 的 WKWebView**——它不支持这种非标准的 webkit 功能。我的理解是 WKWebView 仅支持 iOS Safari 可用的功能。 (虽然 WKWebView API 的可用性对于 iOS 上的第三方浏览器来说是一个重大进步，但它仍然!= Chrome 的 Blink 渲染引擎。)

** 我认为过去几年这种情况没有改变，而且您的经验表明情况也没有改变。

参见:

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