CSS-параллакс с фиксированным заголовком в Firefox

Question

Я пытаюсь реализовать фиксированный заголовок и эффект параллакса, который, кажется, работает в Chrome, но не в Firefox.

Для параллакса я попытался использовать следующее 2 решение:

• https://www.okgrow.com/posts/css-only-parallax
• https://alligator.io/css/pure-css-parallax/

Параллакс сам по себе работал в Firefox и в Chrome при использовании 1-го решения, 2-е работало только в Chrome.

Я добавил фиксированный заголовок в свой HTML как

<div id="site-header">
    <div>Header</div>
</div>

#site-header {
    position: fixed; /* Fixed position - sit on top of the page */
    top: 0; 
    width: 100%;
    height: 10vh;
}

Я добавил стиль

margin-top: 10vh;
height: 90vh;

к классу .MainContainer, который исходит от https://www.okgrow.com/posts/css-only-parallax.
Фиксированный заголовоки эффект параллакса прекрасно работает в Chrome, но не в Firefox.

Пожалуйста, отметьте его в https://codepen.io/vikhor/pen/vMmXLR.

Не могли бы вы помочь, что идет не так?

Answer 1

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

.ParallaxContainer {
    margin-top: 10vh;
}