iOS 10 : uncertain freezing during scroll of HTML list styled with -webkit-overflow-scrolling: touch

Question

Overview

Hello.
This issue is about an uncertain freeze during scroll of <ul /> which is styled with CSS

-webkit-overflow-scrolling: touch

on the Safari browser of iOS.

Similar issues

I read similar issues or posts

Div scrolling freezes sometimes if I use -webkit-overflow-scrolling

iOS 9 `-webkit-overflow-scrolling:touch` and `overflow: scroll` breaks scrolling capability

Webkit overflow scrolling touch CSS bug on iPad

http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

and so on.
But I can not perceive which solutions fix my problem.

HTML and CSS for this issue

I displayed the next index.html with index.css on the latest model of iPad.

• index.html

  • https://github.com/jun68ykt/wos-touch-sample/blob/master/index.html

• index.css

  • https://github.com/jun68ykt/wos-touch-sample/blob/master/index.css

These are very simple. The index.html above has only one list <ul /> which includes 50 items and is contained by <div class="container"> .

Reproducing situations of this issue

Maybe you can reproduce according to the following procedure.

1. Scrolling list to reach the bottom of it

2. After confirming the side bar vanished, touch and try to move further down. Of course, list can not be scrolled

3. Next, change the direction of moving finger and try to rewind to the top

4. But I found that the especially first stroke of finger directed to top did not work.

5. After a few seconds, I could touch and move list to the top.

For better understanding, I posted the movie into YouTube in which I operated iPad to display HTML above.

a Sample of -webkit-overflow-scrolling: touch
https://www.youtube.com/watch?v=MkAVYbO_joo

The problem point 4. of the procedure items above is viewed at about TC0:08 of this movie.

It should be noted that my iPad in the movie above is

• iPad 9.7inch (latest model)
• iOS 10.3.2
• and I use the Safari browser in it.

Wanted answers

Would you do me a favor? I need some help for next questions.

• Why does the situation like 4. of list above occured ?

• How to fix HTML or CSS to let the list scroll more smoothly ?

Sample program

A sample program which was displayed in the movie above can be downloaded from GitHub.
Following URL is its repo.

https://github.com/jun68ykt/wos-touch-sample

This sample requires Node.js to run server.

Best regards.

Answer 1

in your css

overflow: hidden;

or

overflow: scroll;

you can use css @media rules for different displays

Answer 2

A method which can bypass the issue is using the body's scroll. But it is for certain scenario.

Answer 3

Use @media rules for different displays. Example:-

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}


@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}