Position Fixed on Chrome Mobile Causing Issues When Scrolling

Position fixed on chrome mobile causing element to move on scroll up/down

For some reason, my Google Chrome on mobile required minimum-scale=1 in the viewport <meta/>.

<meta name="viewport" content="minimum-scale=1"/>

Fixed element Y position calculated wrong after scroll on chrome for android

The bug seems to be related to hammer.js:

https://github.com/hammerjs/hammer.js/issues/1171

Full page fixed background jumps when scrolling because of the bottom bar on mobile

Finally, I found a solution, here is my solution.

HTML

<body>
    <div id="bg"></div>
    CONTENT...
</body>

CSS

#bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    transform: scale(1.0); 
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("path");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

Position Fixed on Chrome Mobile Causing Issues When Scrolling

Position fixed on chrome mobile causing element to move on scroll up/down

Fixed element Y position calculated wrong after scroll on chrome for android

Full page fixed background jumps when scrolling because of the bottom bar on mobile

Related Topics

Leave a reply