Scrolling on mobile (iOS) causes lag, browser address bar behaves weirdly (hides and reappears)

I've been working on a website which works pretty well, bar some optimisation issues that I'll tackle in the future; you can see it there: http://robin-v.net/

The problem I'm facing today is that, on mobile browsers – at least on iOS, I haven't been able to try on Android recently but I've heard it behaved similarly – scrolling causes the browser to lag quite a bit and the address bar to act weirdly.

Whenever you scroll, during the scrolling itself nothing strange happens but as soon as you lift your finger from the screen the browser freezes for a moment, and then the address bar toggles its states – if it was visible it collapses, and vice-versa. I know that the address bar is meant to collapse whenever you scroll down, but here it toggles from hidden to visible whenever you scroll, regardless of the scroll direction. (Depending on the browser, the address bar might never hide at all, and stay visible 100% of the time.)

I have no idea what might cause this behavior... the version of the website that's currently online has almost no JS (the little it has has nothing to do with scrolling). I'm pretty sure it's due to a CSS declaration, but I don't know which.

To be honest, I'm relatively new to web development, and I learnt by myself, so I'm sure I must be doing something wrong somewhere, but I don't know what. I've faced the same issue on another website I made, so it's probably a habit I got from somewhere that I should get rid of.

From what I've gathered, I think it probably has to do with the declarations on the html or body elements, or something to do with overflow or positioning... But that's all I have. :/

I'm pasting the code for the base structural elements below, but I'm not even sure the problem lies with them.

HTML

<body class="home blog">
    <div id="main">
        <div id="scenes">
            ...
        </div>
        <div id="slidewrapper">
            <div id="rightsec" class="mainsec">
                ...
            </div>
               <div id="leftsec" class="mainsec">
                ...
            </div>
    </div>
</div>
</body>

CSS (Sass)

html {
    box-sizing: border-box;
    font-size: 125%;
    text-size-adjust: 100%;
    line-height: 1.4;
}

body {
    background: #000;
}

#main {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#scenes {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
    width: 100%;
    margin: auto;
    pointer-events: none;
}

#slidewrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
}

.mainsec {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#leftsec {
    z-index: 1;
    left: calc(60px - 100%);
}

#rightsec {
    z-index: 2;
    right: calc(60px - 100%);
}

Cheers!

Solution

Okay, it seems it's all caused by the elements containing the content having a fixed size, filling the whole screen (in this case, #main is 100vw * 100vh) and with overflow: hidden. When you scroll, the content inside #main moves, but the document itself doesn't, since it's not larger than the viewport. That's why the address bar never moves either.

I managed to fix the issue on a different website, but unfortunately, due to the structure of my homepage (which I linked in the question), I don't see how I could change it there. If someone has an idea, please feel free to share!