Problems with responsiveness for Safari Browser/iOS

Hey Community,

It appears I’m having some responsive design related issues regarding my site. I have a scroll-animation (a that is set for 100% is the parent of two divs which take up 50% of this parent

respectively such as, & . Both these interior
's have a horizontal flex-box and a width of 2000vw to allow for overflow inside.
There are several in which I have inserted various images with the same dimensions width=300px height=500px) for some reason the is not visible for certain mobile devices (mainly those that use safari browser)

Site:

Read-Only-Link:
https://preview.webflow.com/preview/portfolio-design-9db875?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-design-9db875&preview=1786c999f7b1c5ee2a4c1a6eaad883b0&workflow=preview

Test:
Mobile device (Iphone 11, 12, 13) using safari browser

Expected Experience:


Actual Experience:

CSS Properties of Outter Wrapper:

CSS Properties of Interior Wrapper:

Any suggestions about how I can fix this?
READ-Only-Link
https://preview.webflow.com/preview/portfolio-design-9db875?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-design-9db875&preview=1786c999f7b1c5ee2a4c1a6eaad883b0&workflow=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)