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

iOS Safari 13: Default validation bubble messages are not properly aligned

提问人:MoritzLost 提问时间:5/28/2020 最后编辑:TylerHMoritzLost 更新时间:1/12/2023 访问量:1492

问:

我们使用 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 设备上的样子:

validation message in English on iPhone

validation message in German on iPad

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

我的Safari版本是Safari / iOS 13.3.1,但是升级到13.5后仍然是一个问题。

HTML iOS 移动 Safari 约束验证 API

评论

2赞 Ali Zahid 5/29/2020
我也在经历这种情况。看起来像一个 webkit 问题。由于 iOS 上的所有浏览器都必须使用 webkit 引擎,因此您也会在 Chrome 上体验到这一点。参见 2.5.6:developer.apple.com/app-store/review/guidelines/...
1赞 D-Money 9/23/2021
Fwiw 这似乎在 iOS 14 和 iOS 15 上得到了解决

答:

-1赞 Vaxind 12/4/2021 #1

向窗体添加类

并使用 CSS 添加此

display: flex;
align-items: center;

评论

1赞 MoritzLost 12/6/2021
这并不能回答这个问题。在尝试回答之前,请仔细阅读问题。