Пустая страница о прокрутке в Firefox

Question

У меня есть простой аккордеон с длинным содержанием.Он должен закрываться при нажатии за пределами контейнера.И у меня есть проблема, когда я пытаюсь прокрутить содержимое вниз с помощью полосы прокрутки, я получаю пустую страницу.Эта ошибка воспроизводится только в Firefox.В других браузерах работает нормально даже в IE11.

    const block = document.querySelector('.block');
    const collapse = document.querySelector('.collapse');

    collapse.addEventListener('click', () => {
        block.classList.toggle('open');
    });

    document.addEventListener('mousedown', (e) => {
        if (block.contains(e.target)) {
            return;
        }
        block.classList.toggle('open', false);
    });

    body {
        overflow-y: scroll;
    }
    
    .block {
        max-height: 100px;
        overflow: hidden;
    }
    
    .block.open {
        max-height: 100%;
    }

    <div class="block">
        <button class="collapse">Click</button>
        <p class="text">
            Long content here...
        </p>
    </div>

Как это выглядит

DEMO : Jsfiddle

Прежде всего, я хочу знать, почему это происходит, и как это решить?

ОБНОВЛЕНИЯ :

I 'мы заметили, что когда на странице есть элементы со свойством position: fixed;, они не исчезают.Кроме того, когда вы изменяете размер окна, содержимое возвращается.

Answer 1

Кажется, что щелчки за пределами .block действительно сворачивают текст, что происходит при нажатии на полосу прокрутки. Вы по-прежнему можете прокрутить вниз, щелкнув по нему, но, поскольку содержимое теперь недостаточно длинное, чтобы иметь полосу прокрутки, оно снова исчезает.

Чтобы предотвратить прослушивание щелчков на полосе прокрутки, вы можете попробовать подключить прослушиватель событий к body вместо прямого включения document:

document.body.addEventListener('mousedown', (e) => {
  if (block.contains(e.target)) {
    // avoid stopping other mousedown events by returning true
    return true;
  }
  block.classList.toggle('open', false);
});