Как убрать разрыв между заголовком и телом сайта при оттягивании в Safari?

Question

[GIRo]

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

Раздражает баг в Safari, при оттягивании страницы вниз, либо резкой перемотки в начало страницы хедер отрывается от тела страницы, т.к. он жестко фиксирован, а страница уползает на какое то время вниз. В Chrome все выглядит отлично, при тех же действиях шапка уезжает вниз вместе с телом.

Так выглядит верх сайта в первоначальном виде:


А так при оттягивании страницы вниз:

Немного HTML

...
<div class="wrapper">
  <header> ... </header>
  <div class="content">
    <div class="jumbotron">...</div>
    ...
  </div>
</div>

Немного CSS

header {
position: fixed;
z-index: 100;
width: 100%;
background: linear-gradient(to right, #283c28, #3c5f42);
color: #ccc;
text-transform: uppercase;
min-height: 5rem;
}
.content {
padding-top: 5rem;
}
.content .jumbotron {
position: relative;
height: calc(100vh - 6rem);
max-height: 30rem;
min-height: 16rem;
background: linear-gradient(to right, #283c28, #3c5f42);
background-repeat: no-repeat;
color: #ccc;
display: -ms-flexbox;
display: flex;
padding-left: 36rem;
padding-right: 1rem;
}

Пытался добавить блок с таким же фоном под хедером, чтобы он уходил за страницу вверх, но он обрезается. Посоветуйте что делать? Буду безмерно благодарен.

Answer 1

[GIRo]

Нашел само ответ на поставленный вопрос, найдя подходящий пример

Вместо использования в хедере позиции fixed, есть так называемый sticky + top: 0;
В итоге переписал CSS следующим образом:

header {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 100;
width: 100%;
background: linear-gradient(to right, #283c28, #3c5f42);
color: #ccc;
text-transform: uppercase;
min-height: 5rem;
}

/*В отступе сверху необходимость отпала, поэтому убираем его*/
.content {
/* padding-top: 5rem; */
}