Фиксированный navbar отделяет браузер от Chrome для iPhone

У меня есть веб-сайт с навигационной панелью с начальной загрузкой (пример здесь), и заметил, что, используя Chrome на iPhone, при быстрой прокрутке навигационная панель отделяется от верхней части экрана всего на несколько пикселей. Это показано на следующем скриншоте, на странице примера начальной загрузки:

Это происходит только в Chrome на iPhone, а не на iPad или любом Mac/PC, который я тестировал. Это также происходит на каждом веб-сайте с фиксированной навигационной панелью, которую я мог найти. Единственное, о чем я могу думать, это расширить цвет фона навигационной панели вверху браузера, чтобы, когда навигационная панель в конечном итоге вытащена, она не полностью отделена от экрана. Тем не менее, это все еще оставляет содержимое навигатора снесенным вниз и, безусловно, похоже на грязное исправление.

Кто-нибудь еще сталкивается с этой проблемой и существует ли какое-либо известное исправление?

Ответ 1

Я использовал сложный способ охватить этот пробел,
Я установил padding-top: 100px на nav, а затем margin-top: -100px,
поэтому, когда это произойдет снова, пробел будет заполнен верхним слоем.

Пока все работает, и надеюсь, что это тоже поможет.

Ответ 2

ОК, так что у меня была такая же проблема: наличие пробела перед содержимым <body> в хром, решение найдено в конце? У меня был пробел ' ' в начале документа, перед тегом <!DOCTYPE html>, удалив его, все исправлено.

Не мог поверить.

Ответ 3

Это не решение, но добавление белого элемента над элементом улучшит ситуацию, предотвращая прохождение контента:

.fixed-header:after {
    content: '';
    position: fixed;
    top: -20px;
    height: 20px;
    width: 100%;
    background-color: #fff; // whatever your nav background color is
}

Ответ 4

Просто столкнулся с той же проблемой около недели назад. Я использовал Bootstrap и обнаружил эту проблему в Google Chrome на iPhone. Попытайтесь разместить <div class="wrapper"></div> вокруг всего своего контента, кроме навигационной панели с фиксированной точкой. После того, как это закончило, создайте страницу со следующим CSS:

body, html {
  width: 100vw;
  height: 100%;
  overflow-x: hidden !important;
  display: block;
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
  overflow-x: hidden !important;
  width: 100vw;
  display: block;
}

html {
  overflow-x: hidden !important;
  width: 100vw;
  display: block;
}

.wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  overflow-x: hidden !important;
  height: 100vh;
  width: 100vw;
}

.navbar {
  height: 70px;
  width: 100%;
  position: absolute;
  background-color: indigo;
}

EDIT: Google исправил это, так что это уже не проблема. Слава Богу!