本机日期输入忽略 CSS

Question

我对类型的本机输入有问题date。我的案例由具有多个不同类型的本机输入（text、number、date等）的本机表单组成。具有该表单的应用程序具有粘性标头，这会导致以下行为：

每当提交表单并且表单验证遇到输入字段的无效输入时，表单都会自动滚动，以便受影响的字段显示在浏览器的最顶部，同时显示验证错误消息。该字段被粘性标头遮挡。

我通过使用scroll-margin输入字段的 CSS 属性解决了这个问题，该属性尊重粘性标题的高度。

这适用于除日期输入字段之外的所有输入类型。

我无法找到任何官方错误报告。还有其他人遇到过这种行为吗？如果是这样，我如何在不使用 JQuery 的情况下解决这个问题？

body {
  max-width: 500px;
  font-family: Roboto, sans-serif;
  line-height: 1.4;
  margin: 0 auto;
  padding: 4rem 1rem;
  font-size: 1.5rem;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  color: white;
  width: 100%;
  padding: 1rem;
  background: #1976D2;
}

input[type=text] {
  scroll-margin-top: 150px;
}

input[type=date] {
  scroll-margin-top: 150px;
}

input[type=submit] {
  margin-top: 500px;
}

<header>
  Fixed Header.
</header>

<form>
  <input type="text" required/>
  <br/>
  <input type="date" required/>
  <br/>
  <input type="submit">
</form>

Answer 1

当一行 CSS 就能完成的时候，谁还需要 javascript？只需添加html { scroll-padding-top: 70px; }:)

html {
  scroll-padding-top: 70px;
}

body {
  max-width: 500px;
  font-family: Roboto, sans-serif;
  line-height: 1.4;
  margin: 0 auto;
  padding: 4rem 1rem;
  font-size: 1.5rem;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  color: white;
  width: 100%;
  padding: 1rem;
  background: #1976D2;
}

input[type=submit] {
  margin-top: 500px;
}

<header>
  Fixed Header.
</header>

<form>
  <input type="text" required/>
  <br/>
  <input type="date" required/>
  <br/>
  <input type="submit">
</form>

https://jsfiddle.net/m4uxj321/