javascript - native 日期输入忽略 CSS

Question

我对 date 类型的 native 输入有疑问.我的案例包含一个带有多个不同类型的本地输入的本地表单( 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/