Issue with fixed header on mobile

Hi everyone! So I am having this odd thing happening to the fixed header of a website I am working on. The header stays at the top of the screen when viewed on desktop but if viewed on mobile, the header jumps a bit when you scroll up or down on the page.

I have tested the site using Firefox, Chrome, and Safari on desktop and the header remains fixed.

On mobile I have used Safari and Chrome and the header does not stay fixed.

What is causing the header to move if viewed on mobile? Any help would be greatly appreciated.

Here is a link to a video showing what I mean:

Video example

Here is the relevant code as well.


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


#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;

Thanks again!

What’s in the document head? Are you using a CSS reset? Or normalize.css How about:
<meta name="viewport" content="width=device-width, initial-scale=1"> I prefer to leave that “as is” so I don’t disable user zooming but it can be changed. Any media queries? Maybe put your full page in a codepen so others can make adjustments.