Search code examples
htmlcssbackground-imagecss-position

Fixed background image zooms in when scrolling on mobile


This is my first question. As the title says I'm having troubles with fixed bg image on mobile. When I scroll down a it makes a small zoom in, and when i scroll up it goes back to original size. I dont understand why. I went through all the already made questions about this topic before asking, I asked a couple of friends too, but to be honest i couldn't find the answer yet.

This is my website where im having this issue, open it in your mobile browser.

This is my Github repository where you can see all my code.

This are some of the things im using, that i found in other related posts:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

CSS

.bg {
     background: url(./app/assets/images/2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    width: 100%; 
}

Thank you all for your time!


Solution

  • For whatever reason, your site seems to be fine.
    Are you sure you do not have another finger on the screen or dust or liquid if viewing from your mobile. If viewing from your PC, make sure you do not have the Ctrl button clicked while trying to scroll.
    Those are all simulate zooming.