iOS resets (safari, chrome, firefox) to far left of horizontally overflown element

Question

I've searched far and wide, but couldn't find anything. I'm having trouble with something I'm working on - basically what I'm having trouble with is an element that I need to disable horizontal scroll on.

I have limited options since fundamentally changing the structure would probably cause a lot of other things to break and be (for now) an unmanageable amount of additional work generated.

I have a container, a sticky header and a content element. The container has a calculated height viewport because the content loads/hides dynamically (when in viewport it shows, when outside it hides) due to performance issues. I'd need to have the horizontal scroll in container disabled, but still let it horizontally scroll when I'm dragging the header left/right - for context - it's a calendar view that has days in the sticky header and "sets" the viewport to today and has an amount of days loaded in the future (right) and past (left) that are outside of the viewport.

When I set overflow-x: hidden on the container the horizontal scroll is disabled as expected, I can still scroll left/right on the sticky header, but for some reason on iOS devices, as soon as I touch and start scrolling vertically I get slammed all the way to the left to the start of the container/content elements - this doesn't happen on android or chrome simulator, they keep on scrolling vertically in the horizontal position that was set in JS.

Minimal reproducible example that I've made is here:

https://jsfiddle.net/w1b9v42r/30/

I scroll to the #2 element in js, as soon as I touch vertical scroll in iOS I get slammed back all the way to the left.

Basically, is this preventable? Is it a "feature" of iOS? Why is this happening? are the questions I'm looking for answers to.