Safari 自动填充位置不正确

Question

我已经在 Rails 中完成了一个简单的视图，用于登录我的网站，但是当我在 Safari 上加载页面时，它会自动显示自动填充框，而不是在电子邮件字段下方，而是在浏览器窗口的左上角，甚至与 Safari 的菜单栏重叠。

这是我使用 Boostrap 的登录视图：

<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' %>

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

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

单击电子邮件字段时，它仍然显示在角落中。

但是，当单击电子邮件字段中的“自动填充”按钮时，“自动填充”框会出现在该字段正下方的正确位置。

我只是使用 bootstrap 进行样式设置，这里没有其他功能。但是项目中导入了jQuery。

我找到了一篇旧帖子，似乎有相同的问题，但没有答案。

谢谢，

Answer 1

我也有同样的问题很长时间了。 我不确定为什么，但更改输入 ID 修复了它。 我的默认为 id='用户名'。 将其更改为其他任何内容即可修复它。

Answer 2

这似乎是输入元素 id 的问题。 对我来说，当 id 设置为

email

时，自动填充弹出窗口显示在屏幕顶部，删除 id 后，弹出窗口显示在输入元素下的正确位置。

按照

this

Apple 开发者文章中的建议，将输入元素的自动完成字段设置为 username，当 id 仍然定义时，也没有更改弹出窗口的位置。