在移动浏览器或Chrome浏览器上查看时，固定标头移动

Question

我正在一个具有固定标题的网站上工作。在台式机上查看时，标题保留在屏幕顶部，但在移动设备上查看时，当您在页面上上下滚动时，标题会跳一点。

我已经在台式机上使用Firefox，Chrome和Safari测试了该网站，并且标题保持固定。

在移动设备上，我使用了野生动物园和Chrome浏览器，但标头没有固定。

在移动设备上查看时，标题移动的原因是什么？任何帮助将不胜感激。

以下是显示我的意思的视频的链接：

https://streamable.com/5p89c

这也是相关的代码。 DEMO

HTML：

<!-- Header -->
<header id="header">
  <h1>
    <a href="index.html"></a><a href="index.html">World Valve Co., Ltd.</a>
  </h1>
  <nav>
    <a href="../valve.html">日本語</a>
    <a href="Valve.html">English</a>
    <a href="#menu">Menu</a>
  </nav>
</header>

CSS：

#header {
  -moz-transition: background-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  background-color: #1A3F79;
  height: 3.5em;
  left: 0;
  line-height: 3.5em;
  padding-top: 4px;
  padding-right: 1.25em;
  padding-left: 1.25em;
  padding-bottom: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}