IOS 10: indefinite freeze while scrolling HTML list in -webkit-overflow-scrolling: touch style

Question

overview

Hey.
This issue is due to undefined hovering during <ul/>CSS style scroll

-webkit-overflow-scrolling: touch

in the Safari browser for iOS.

Similar problems

I read related questions or posts

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

iOS 9 '-webkit-overflow-scrolling: touch' and 'overflow: scroll' makes it impossible to scroll

CSS touch error when overflowing Webkit on iPad

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

etc.
But I can’t understand what solutions solve my problem.

HTML and CSS for this problem

index.html index.css 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

. index.html <ul/> 50 <div class="container">.

, .

1. ,

2. . ,

4. , , , .

5. .

YouTube, iPad HTML .

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

4. TC0: 08 .

, iPad

• iPad 9.7 ( )
• iOS 10.3.2
• Safari .

? .

• 4. ?

• HTML CSS, ?

, , GitHub.
URL .

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

Node.js .

.

Answer 1

css

overflow: hidden;

overflow: scroll;

CSS @Media

Answer 2

@media . :-

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


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

Answer 3

A method that can work around the problem uses body scrolling. But this is according to a certain scenario.