iOS Safari：默认验证气泡消息未正确对齐

Posted 2023-03-04

【中文标题】iOS Safari：默认验证气泡消息未正确对齐

【英文标题】：iOS Safari: Default validation bubble messages are not properly aligned

【发布时间】：2020-09-15 17:20:56

【问题描述】：

我们正在使用 html5 表单验证，而不会覆盖验证错误消息的默认系统 UI。这在任何地方都可以正常工作，但在 ios Safari 上，验证消息在气泡弹出窗口内没有正确对齐。我们已经在两个完全独立的设备上以不同的形式对此进行了测试。即使是没有 CSS 的最小表单也有相同的结果：

https://jsfiddle.net/GinSan/48hnrf92/1/

<form>
  <label for="test">Test field</label>
  <input required id="test" name="test" type="text">
  <button type="submit">Submit</button>
</form>

这是验证消息在我们测试的 iOS 设备上的样子：

验证消息与顶部对齐，而不是居中对齐，即使这是一个系统 UI 元素。这是一个已知问题吗？除了向苹果报告并等待修复或替换系统验证消息之外，有什么可以做的吗？

【问题讨论】：

我也遇到了这种情况。看起来像一个 webkit 问题。由于 iOS 上的所有浏览器都必须使用 webkit 引擎，因此您也将在 Chrome 上体验到这一点。见 2.5.6：developer.apple.com/app-store/review/guidelines/…

这个问题在 iOS 13.5.1 中仍然存在，也有同样的问题

现在几周也看到完全相同的问题。

在这里遇到同样的问题

Fwiw 这似乎在 iOS 14 和 iOS 15 上得到解决

【参考方案1】：

在表单中添加一个类

并用 CSS 添加这个

display: flex;
align-items: center;

【讨论】：

这不能回答问题。请在尝试回答之前仔细阅读问题。