iOS 10：在使用 -webkit-overflow-scrolling: touch 样式的 HTML 列表滚动期间不确定冻结

Question

概述

你好。
这个问题是关于<ul /> 滚动期间的不确定冻结，即 使用 CSS 样式化

-webkit-overflow-scrolling: touch

在 iOS 的 Safari 浏览器上。

类似问题

我读过类似的问题或帖子

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/

等等。
但我不知道哪些解决方案可以解决我的问题。

此问题的 HTML 和 CSS

我在最新型号的 iPad 上显示了下一个 index.html 和 index.css。

• 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. 确认侧栏消失后，触摸并尝试进一步向下移动。 当然列表不能滚动

3. 接下来，改变移动手指的方向，尝试倒回顶部

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

一个可以绕过这个问题的方法是使用身体的滚动。但这是针对特定场景的。

Answer 3

对不同的显示使用@media 规则。 示例：-

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


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