Firefox, JS, CSS — вертикальная прокрутка прыгает, когда элемент за пределами VP меняет высоту ⇐ CSS

[Anonymous]

У меня странная проблема с Firefox: он прокручивает страницу вниз, если контент, находящийся за пределами области просмотра, меняет высоту. в Chrome работает без проблем. Я записал проблему здесь https://streamable.com/cesrcl.
Существует код, который отключает (немедленно закрывает) карту, когда она скрывается за пределами области просмотра:

Код: Выделить всё

function isElementOutsideViewport(el) {
const rect = el.getBoundingClientRect();

return (
rect.top >= (window.innerHeight || document.documentElement.clientHeight) ||
rect.bottom  {
if (isElementOutsideViewport(recipeCard)) {
recipeCardStateActor.send({type: 'doShutDown'});
}
}

// Handles the shutDown event
handleShutDown: () => {
applyClosedCardStyles();
}

function applyClosedCardStyles() {
recipeCard.classList.add('cursor-pointer');
description.classList.add('hide');
detailButtonWrapper.classList.add('hide');
cardCloseButton.classList.add('hide');
image.classList.add('recipe-card-image-height-closed');
recipeInfoBadges.classList.add('hide');
}

Некоторые стили, которые могут быть связаны:

Код: Выделить всё

html {
font-family: sans-serif;
}

body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: "Roboto Slab", serif;
font-weight: 400;
font-style: normal;
background: #FAF3E0;
overflow-y: scroll !important;
}

.recipe-card {
background-color: #fff5EC;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border-radius: 1rem;
overflow: hidden;
margin-top: 2.5rem;
position: relative;
}

Разметка:

Код: Выделить всё

 // rendering recipe cards

...

Ребята, вы знаете какое-нибудь лекарство от этого? Спасибо.
Я пытался применить несколько стилей, которые хорошо звучат на теле, но безуспешно:

Код: Выделить всё

    overflow-anchor: none;
-ms-scroll-rails: none;
scroll-snap-stop: always;
scroll-margin: 0;
scroll-padding: 0;
overscroll-behavior-y: contain;
scroll-snap-align: center;

Сборка Firefox: 20240626001103

Подробнее здесь: https://stackoverflow.com/questions/787 ... -changes-h