html – Why is there a white background at the bottom of my page on the scroll?

I have come to the end of the production of my website. I thought I had completed my project until I started debugging the website on mobile devices. I noticed an issue in which scrolling bounced off the white background at the bottom of my page. I tried to debug this issue by changing some styles in my footer and body but all the suggested solutions found online were useless to me.

Problem video.

What I realized was that the white background would fade after the footer was removed.

html {
    overflow: auto;
    height: 100%;
}

body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#footer {
    bottom: 0;
    text-align: center;
    position: sticky;
    width: 100%;
    margin-top: auto;
}

    #footer .dev {
        text-align: center;
        font-family: 'Roboto', sans-serif;
        color: white;
        padding-top: 10px;
    }

HTML:

Codepen

I thought this might be a problem with the device’s viewport, but I made sure the minimum height for the body was set at 100vh. I also tried changing the HTML:

min-height: 100vh;

But that did not solve my problem. Any guidance / explanation as to why this happens would be greatly appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *