3

I'm working on this test website (http://offers.ryo-o-jpn.com/ ) right now, and on the top page, there's this hero header with 100vh, which is modified in javascript. On mobile devices, I have this problem, where the height of the hero header stretches and gets taller as the address bar on both Safari and Chrome slide down. Therefore, the whole website gives this jumpy and laggy effect every time the address bar slides up and down. Is there any way to prevent the height from stretching because of the address bar?

Here is the website where a hero header is behaving just as I want it to be.

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

I've checked this answer: CSS3 100vh not constant in mobile browser, but nothing seems to be working.

=====================My code

HTML for the hero header part


           <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 for the hero header


.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);
    }

The javascript code that generates the height.


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`);
});

Forgive my lack of information in advance if there's one. I would appreciate any help. Thank you.

Ryo
  • 75
  • 8

0 Answers0