validation - Chrome 验证气泡位置错误

Question

所以我写了一个小的jsfiddle突出了这个问题：

<form>
  <label>Test field</label>
  <input type="text" required="required" />
  <input type="submit" value="Submit">
</form>

如果代码在 Firefox 或 Edge 上运行，验证气泡会出现在正确的位置：

但 Chrome 会这样做：

如何确保验证气泡位于正确的位置？我需要在 Chrome 中做一些额外的事情吗？

我已经在两台单独的 PC 上对此进行了测试以复制该问题，我正在使用 version 54.0.2840.99 m (64-bit)。