Safari浏览器Autofill自动填充弹窗位置偏移问题求助

这是Safari内核的已知bug，当表单元素父容器使用了偏移类（比如Bootstrap的col-md-offset-3）时，Safari计算输入框坐标会出现偏差，导致自动填充弹窗定位错误。以下是可直接落地的修复步骤：

修复步骤 #

• 给输入框补充autocomplete等识别属性，明确告知Safari字段用途，避免识别异常导致的定位偏移
• 新增轻量CSS规则触发Safari页面重绘，强制浏览器重新计算输入框的实际坐标
• 可选搭配极小的jQuery逻辑，在输入框触发focus时主动触发重排，覆盖首次点击的异常场景

新增CSS规则 #

/* 仅对Safari生效的兼容规则，不会影响其他浏览器 */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .form-control {
      transform: translateZ(0);
    }
  }
}

修改后的登录视图代码 #

<div class='row'>
  <div class='col-md-6 col-md-offset-3'>
    <%= form_with(url: login_path, scope: :session, local: true) do |f| %>
      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control', autocomplete: "username email", autocorrect: "off", autocapitalize: "none" %>

      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control', autocomplete: "current-password" %>

      <%= f.submit 'Log in', class: 'btn btn-primary' %>
    <% end %>
    <p>New user? <%= link_to "Sign up now!", signup_path %></p>
  </div>
</div>

可选jQuery兼容逻辑（如果以上方案还有异常） #

如果仍存在首次点击输入框时定位错误的情况，可以在页面加载完成后添加以下JS逻辑：

$(function() {
  $('input[type="email"], input[type="password"]').on('focus', function() {
    // 主动触发重排，让Safari重新计算输入框位置
    const $el = $(this);
    $el.css('transform', 'translateZ(0)');
    setTimeout(() => $el.css('transform', 'none'), 10);
  })
})

内容的提问来源于stack exchange，提问作者lecdav