Исправлено перемещение заголовка при просмотре на мобильном сафари или хром - PullRequest
Новая
       14

Исправлено перемещение заголовка при просмотре на мобильном сафари или хром

0 голосов
/ 30 мая 2019

Я работаю над сайтом с фиксированным заголовком. Заголовок остается в верхней части экрана при просмотре на рабочем столе, но при просмотре на мобильном телефоне заголовок немного подпрыгивает, когда вы прокручиваете страницу вверх или вниз.

Я протестировал сайт, используя Firefox, Chrome и Safari на рабочем столе, и заголовок остается неизменным.

На мобильном устройстве я использовал 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;
}
...