Issue with overflowing content on iOS

Hi everyone! I have a few issues with overflow content on iOS. I have such cards (3 cards in the row) with video, badge, and some text info. On desktop these cards fully fit on the screen.
On mobile, I want to make a horizontal scroll.

I made Div with overflow=Auto and set width=479 px (max screen width for mobile).
Then I put inside another div, set it width=1100 px, and put my cards inside it.

I got the working version, but on iOS smartphones content that initially is outside of the screen often doesn’t show up when I scroll it — sometimes badge doesn’t show up, sometimes video that was on the screen after scrolling disappears and doesn’t show up again:
issue

On Android devices everything work perfect.

Does anyone have ideas on how to fix this issue with overflowing content on iOS?

Below my link to the project: https://preview.webflow.com/preview/page-for-test?utm_medium=preview_link&utm_source=designer&utm_content=page-for-test&preview=0a09edf37bfbfc30ec855d0c268f2866&mode=preview

P.S. This problem only occurs when content moves out from behind the screen. On landscape everything is ok

Guys, do you have any idea?

I can’t say exactly why it’s happening and I can’t confirm it responds that way for me (since I don’t have an iPhone) but here’s a Stack Overflow thread that may point you in the right direction.