如何获取野生动物园以可滚动的形式显示所需的表单错误

Question

是否有人可以解决此问题：

问题：

• 在safari上，如果您具有可滚动的表单，则在触发提交事件时，顶部的必填字段将不会显示本机的errorText。

示例

• Codepen example
• Chrome / Firefox无法正常工作
• Safari将在不可滚动表单上显示错误，而在可滚动表单上失败。

有人有野生动物园解决方案吗？我需要此功能才能在Safari中工作。

div {
  display: flex;
  flex-direction: row;
}
form {
  width: 200px;
}
input {
  height: 500px;
  width: 200px;
  background-color: green;
}

.small {
  height: 50px;
  background-color: salmon;
}

<div>
<form>
  <input type="text" required></input>
  <input type="submit"></input>
</form>

<form>
  <input type="text" required class="small"></input>
  <input type="submit" class="small"></input>
</form>
</div>

注意：请确保您的窗口正在滚动至左侧的窗体，否则此错误将不会出现。

更新：

可以使用表单的oninvalid方法执行HTMLElement.scrollIntoView()来解决此问题。

但是，如果您有多个元素，则最终会出现在底部的元素上，并且错误消息仍然隐藏，因为您必须滚动到该元素。收到第一个元素后，我将尝试退出失效。