Как сделать чтобы при скролле страницы с фиксированной шапкой не появлялся зазор в один пиксель через который видно контент?

Question

[eafedorow]

При скролле страницы с фиксированной шапкой появляется зазор в один пиксель через который видно контент. На приведенном скриншоте между фиксированной к верху шапкой появляется щель. Иногда она пропадает из-за этого появляется эффект моргания при скролле.

Появляется только на айфонах.



Какая реализация у фиксированной шапки:

const nav = document.querySelector('nav');
const header = document.querySelector('.header')
    
if (window.scrollY >= 56) {
   nav.classList.add('fixed__nav')
   header.style.marginBottom = `${navHeight}px`;
}

У класса fixed nav следующие свойства:

position: fixed;
top: 0;
z-index: 1000;

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

Comments

[Вадим]

top: -1px?

[eafedorow]

Вадим, пробовал. Зазор так и остаётся. Пробовал сдвигать на более чем 1 пиксель, шапка просто вылезает за экран, но щель всё равно появляется

[Вадим]

eafedorow, Ну может вы ссылку хотя бы дадите?

Answer 1

[igor042018]

Не пробовал задать top: -1px; ?