Chrome验证气泡位置错误

Question

所以我写了一篇小jsfiddle来强调问题：

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

如果代码在Firefox或Edge上运行，则验证气泡发生在正确的位置：

但Chrome会这样做：

如何确保验证气泡位于正确的位置？我是否需要在Chrome中执行其他操作？

我已经在两台独立的PC上测试了这个问题，我正在使用版本54.0.2840.99 m (64-bit)。