This is a general, well-known issue and limitation on iOS devices/Safari browsers.
Basically the involved CSS properties render the background for the entire screen height. Although it should take the height/width of the container into account... which holds the actual background image.
Probably this can only be fixed by a constant re-calculation of that container and the image dimensions.
Back in the days, even a javascript solution was no real option, because Apple prevented the execution during touch/scroll events. The result was a total freeze of javascript or a very choppy jerky movement.
After many years, the newer iOS/browser versions seem to allow more scripting and update during those touch events.
@Joomshaper
I would like to encourage the Joomshaper Devs to investigate this further. Other companies did find some javascript workarounds! For instance "Yootheme's UIKIT". I have also seen a working effect on an "RS Joomla" template demo. I also remember "Stellar.JS + Scrollability", but it is no longer maintained.
In 2022, I found the project "Universal-Parallax", looks very promising! MIT license ;)
https://github.com/marrio-h/universal-parallax
Apart from Javascript, there might be even new CSS tricks to make this work...
Hope this helps to find some resources for inspiration ;)