-webkit-overflow-scrolling: touch in iOS and losing scroll?

Question

css

Hello.

Sketched a sandbox on the issue:
cssdeck.com/labs/full/9sq4b1ia (already dead)
There is a parent block with display: flex, it has a header, a central block (with scrolling) and a footer.

I ask you to immediately look at the iPhone, as there is no problem on the desktop.
Central block for smooth inertial scrolling with -webkit-overflow-scrolling: touch
If we scroll it, everything is ok.
Now, if you try to scroll, for example, the footer and then scroll the central block again, in half the cases the scrolling will not work.
When you touch it and re-scroll - everything works again.
It's like the central block loses focus and regains it by the 2nd press.

Here is a video of the
bug

I watched a video with transfer to a separate graph layer (translateZ, commented out in css), connected the scroll-lock library - it does not help.

Tell me how to win?

Answer 1

transform: translateZ(0);
Silver bullet for Safari.
Also for blocks that provide for scrolling, set -webkit-overflow-scrolling: touchif something goes wrong with scrolling.
And viewportyou should not forget about.
And overflow-yit should be auto, otherwise be kind enough to scroll through the contents yourself.
And also, do not forget that you are using flex, and flex + safari = bugs. Therefore, it is better to set all these rules for the inner block, which is stretched to the height of the container.

Answer 2

Here is a video of the
bug

Answer 3

1210mk2 found some solution after a while? I don’t even know how to google it correctly, your situation is 1 in 1 like mine now.

Answer 4

In the end, there is no way to win.
Solution: abandon flex in the scroll container. I did a check for ios in my js with the addition of a special class to the container, and in it I registered separate styles for ios.