Почему блок смещается из-за класса элемента backdrop-filter: blur?

Question

[SHKD]

Приветствую я использую замену класса nav при скролле с помощью js меняю .navbar-fixed-top на .fixed-top
Менюшка сделана с помощью offcanvas.

Когда я открываю меню в положении top т.е. еще с классом .navbar-fixed-top все гуд, в любой версии сайта.
Но как только я начинаю скролить и класс меняется на .fixed-top то меню остаться в положении top fixed.

Если я убираю свойство класса .fixed-top {backdrop-filter: blur(20px);} все работает как надо.

В чем может быть дело?

<nav class="navbar navbar-fixed-top navbar-expand-xl">
  <div class="container">
    <div class="offcanvas offcanvas-end-xl" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasExample">
    </div>
  </div>
</nav>

Comments

[modelair]

прикрепите codepen

[xdevelx]

Очевидно потому, что backdrop-filter создаёт контекст наложения. В документации про это написано https://developer.mozilla.org/en-US/docs/Web/CSS/C...

[SHKD]

modelair,
Untitled

Answer 1

[Alfieros]

Объясните логику данного костыля, в вашей непонятной задумке?! Вам нужно фиксировать меню при скроле или раскрывать его при попытке скрола?

Comments

[SHKD]

Положение топ навбар прозрачный, положение скролл навбрал липкий и размытый с помощью блюра. Меню можно открыть из любого положения и оно перекрывает всю площадь экрана.

[Alfieros]

SHKD, Зачем тогда все эти костыли? Это элементарная задача, не требующая сторонних плагинов.

[SHKD]

Alfieros, Вы видимо совсем не поняли вопрос. В моем примере сделайте разрешение меньше 1200, начните скролить и откройте меню.