Fixed background image on Body not working on iPhone

[legacyoperators (Amber)]

I’m looking for some advice. I’d like a background image that is fixed while scrolling and all other content scrolls over top. In the designer, I have a fixed background image set on the body ( see screenshot 1). This works great on desktop browsers and mobile simulators (screenshot 2) but not working on actual mobile device browsers at all (screenshot 3). I searched the forum for similar issues but the posts were old and not good solutions. It seems like a simple common thing that should just work. For now, I’ve had to hide the image on mobile. Thanks in advance for the help.

(screenshot 1)

CSS code being rendered
.body {
overflow: hidden;
border: 1px solid #000;
background-color: #000;
background-image: url(https://uploads-ssl.webflow.com/5ea9c0a…/5ef63e5…_Screen%20Shot%202020-06-26%20at%2011.21.13%20AM.png);
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

(screenshot 2)

(screenshot 3 from iPhone)

sorry, I can’t share the site. It has sensitive information.

[shaqueal (Isiah)]

Have you tested the site on a different mobile device. Other then your phone. Like your friend or other’s. I am asking to see if it the same on others device’s
.

[legacyoperators (Amber)]

The members of my team saw the same issue on their phones. I did not ask what kind of phones they have.

[legacyoperators (Amber)]

I’ve learned fixed backgrounds has a huge repaint cost and messes with scrolling performance. some browsers like safari disable it. So i have been trying some workarounds and sort have it working. It struggles repainting the image when the bottom bar of safari collapses. I may consider a linear gradient instead of using an image.