Background resizing on scrolling in mobile browser

Question

I'm trying to create a background for my site and it works beautifully on desktop
but the background starts to resize when I scroll in my mobile browser (chrome) mainly because of the browser search bar hiding and reappearing upon scroll.

Is there any way I can prevent my background from resizing?
here's a video of what happens on my mobile: https://streamable.com/0fplj6

here's the code:

html {
  height: 100vh;
  margin: 0;
  width: 100%;
}

body {
  margin: 0;
  height: 100%;
  ;
  width: 100%;
  background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#header {
  width: 100%;
  height: 50px;
  background-color: black;
}

#header img {
  height: 6rem;
  margin: 1rem;
}

#content {
  width: 70%;
  margin: auto;
  background: yellow;
  overflow: hidden;
}

<body>
  <div id="header"></div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum.
  </div>
</body>

I found a question which was similar
https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome

but it was 6 years old and none of the solutions were working (in pure css)
so is there any solution preferably with pure css? (use vanilla javascript if absolutely necessary)

Your background size is set to cover, isn't it doing what it's supposed to do? Also, try with an actual phone, that simulator looks a bit broken. — Nora, Apr 11 '21 at 16:33
@ChloeAnderson yes the background size is suppose to cover but i want it to avoid resizing, and yes I did try it on a mobile as well, it's giving the same problem I wouldn't ask if I hadn't tested it :) — , Apr 11 '21 at 16:47

score 0 · Accepted Answer · answered Apr 13 '21 at 16:44

The main culprit is the background-position:fixed as it was meant to size up to the browser screen (minus the address bar area)
The trick is in using a sticky background.
I tested the below code and it should not resize on scrolling down in the mobile browser

html,
body {
  margin: 0;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

#header {
  height: 50px;
  width: 100%;
  background: black;
}

#rest {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background: blue;
}

#content {
  width: 50%;
  z-index: 0;
  grid-row: 1;
  grid-column: 1;
  margin: 0 auto;
  background: yellow;
}

#sticky_back {
  width: 100%;
  height: 100vh;

  grid-row: 1;
  grid-column: 1;
  position: sticky;
  top: 0;
  background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

<body>
  <div id="header"></div>
  <div id="rest">
    <div id="sticky_back"></div>
    <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum.
  </div>
  </div>
</body>

Background resizing on scrolling in mobile browser

1 Answers1