Верстаю сайт, шапка фиксированная, на главной странице в самом начале страницы блок с точно таким же фоном как и хедер, что в итоге сливается в единый элемент, пока не начнешь скролить вниз.
Раздражает баг в 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;
}
Пытался добавить блок с таким же фоном под хедером, чтобы он уходил за страницу вверх, но он обрезается. Посоветуйте что делать? Буду безмерно благодарен.
Простой
