Page Scroll interaction problem on iOS Safari

I’m working on a site with a scroll interaction on the header element.
You can see how it should work on desktop here:
As you scroll down the header image stays fixed and fades down as the rest of the page scrolls up to hide the image. At the same time the type lockup in the centre of the page moves down to also be hidden as the page scrolls up. On desktop and in the Designer preview across the breakpoints I have this working well. However when I view the link in Safari on my iPhone 6s the scroll interaction behaves in a different way? My guess is its something to do with the way IOS interprets scroll behaviour but I cannot seem to get it working, any help would be much appreciated. Thanks

Here is my project read only link:

Hi, anyone have any thoughts on whats causing this issue?