How to solve scrolling bug in safari?

Question

css

Hello. I'm having the following issue with safari on a smartphone
I want to block scrolling on a document, and allow (scroll) inside the main block with overflow-y: scroll
Example of what I'm trying to achieve:
https://jsbin.com/jalitidufe/1/?output
In chrome on android - everything is fine, but on IOS problems begin, as I understand it, because of their elastic scrolling, or all the same, the bug is hiding in the wrong focus.
If you miss your finger and the header gets into focus, and not the main block, the entire scroll freezes, and you need to tap on the block again with overflow-y: scroll so that the scroll continues to work.
I shoveled the entire network in search of an answer, but I never found an answer, but found only similar problems, for example:
https://stackoverflow.com/questions/57380337/mobil...
Thanks for the answers