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