Есть ли способ сохранить 100vh после прокрутки вниз, когда адресная строка (Chrome и Safari) сдвигается вниз?

Question

Я сейчас работаю над этим тестовым сайтом (http://offers.ryo-o-jpn.com/), а на верхней странице есть заголовок героя с 100vh, который изменен в javascript. На мобильных устройствах у меня есть такая проблема, когда высота заголовка героя растягивается и становится выше, когда адресная строка в Safari и Chrome уменьшается. Таким образом, весь веб-сайт дает этот скачкообразный и медленный эффект каждый раз, когда адресная строка перемещается вверх и вниз. Есть ли способ предотвратить рост высоты из-за адресной строки?

Вот сайт, где заголовок героя ведет себя так, как я хочу.

https://nihon-eisen.co.jp/

Я проверил этот ответ: CSS3 100vh не постоянен в мобильном браузере , но, похоже, ничего не работает.

===================== Мой код

HTML для части заголовка героя

           <div class="heroheader">
                <div class="heroheader__image" id="parallax1">
                    <div class="pattern"></div>
                </div>
                <div class="container container--top">
                    <div class="heroheader_headline">
                        <p class="heroheader_headline__main">FREE<br>
                        YOURSELF</p>
                        <p class="heroheader_headline__sub">己の限界を超えろ。</p>
                    </div>
                    <div class="heroheader__scrollbutton">
                        <button class="scrollvertical scroll-down" type="button"><span class="scrollvertical__txt">SCROLL</span></button>
                    </div>
                    <div class="breaking-news-ticker" id="news_flash">
                        <div class="bn-label">
                            NEWS
                        </div>
                        <div class="bn-news">
                            <ul>
                                <li>
                                    <a href="#">1.2. Breaking NEWS 2</a>
                                </li>
                                <li>
                                    <a href="#">1.3. Breaking NEWS 3</a>
                                </li>
                                <li>
                                    <a href="#">1.4. Breaking NEWS 4</a>
                                </li>
                            </ul>
                        </div>
                        <div class="bn-controls">
                            <button aria-label="Prev_news"><span class="bn-arrow bn-prev"></span></button> <button aria-label="Next_news"><span class="bn-arrow bn-next"></span></button>
                        </div>
                    </div>
                </div>
            </div>

CSS для заголовка героя

.container--top{
        position:relative;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }

.heroheader__image{
        background:url(/image/heroheaderimg.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        padding-bottom: 0px;
        width:75%;
        z-index:1;
        box-sizing: border-box;
        position:absolute;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }

Код javascript, который генерирует высоту.

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

window.addEventListener('resize', () => {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

Простите за отсутствие информации заранее, если она есть. Буду признателен за любую помощь. Спасибо.