CSS "background-position: center" doesn't work for mobile

Question

I'm currently working on a website page where one image covers the whole page. Here's my code.

.cover-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.banner { /* linear-gradient darkens out the background image */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/image.jpg");
  background-attachment: fixed;
  height: 100vh;
  width: 100%;
}

<section class="banner cover-bg">
  <div class="container h-100">
    <div class="row align-items-center h-100">
      <div class="col-12 caption text-center">
        <h2></h2>
        <h4></h4>
      </div>
    </div>
  </div>
</section>

This works perfectly fine on PC and Mac and even works well if I shrink the browser size. However, it just doesn't work on mobile (the image is not centered, so the image looks very ugly). I've already done hours of research online and tried all possible solutions other people did to solve this problem, but nothing works for me. Does any of you kind people know how to counter this problem?

On mobile, I tried both Safari and Chrome (both don't work), and I'm assuming that Firefox won't work either.