Fix for `background-attachment: fixed` + `background-size: cover` on iOS

Question

A background-image stretches the height of the div rather than being contained to the dimensions of the viewport. Testing on desktop the desired effect is achieved but on iPhone X (Safari and Chrome) the background stretches the height of the content so the image is 'zoomed in' and blurry.

So my phone is ignoring the combo of:

background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;

I'm aware there has been issues with this in the past on iOS and I have searched SO for threads but I saw this working on https://mrleight.com/clip and I'm wondering how they got this to work - is JS maybe or something else I'm missing as my core CSS seems to more or less match.

I've included an simplified example, I've taken out all the 'real' content and just added a red div with a fixed height to simulate the effect my grid of content has.

I'd rather not resolve this by having a separate div with position: fixed - I see that as a last resort!

html,
body {
  margin: 0;
  padding: 0;
}

.page {
  background: white;
}

.collection {
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.collection:before {
  background: rgba(0, 0, 0, .48);
  content: "";
  height: 100%;
  position: absolute;
  inset: 0;
  width: 100%;
}

.p-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  position: relative;
}

.product-grid {
  background: rgba(255, 0, 0, .24);
  display: block;
  height: 3000px;
  margin: 0 auto;
  width: 50px;
}

<div class="page">

  <!-- START COLLECTION -->
  <div class="collection" style="background-image: url('https://images.pexels.com/photos/38136/pexels-photo-38136.jpeg')">

    <!-- START GRID -->
    <div class="p-grid">

      <div class="product-grid">

      </div>

    </div>
  </div>

</div>