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

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

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

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

4. 但我发现指向顶部的尤其是第一个手指划动不起作用。

5. 几秒钟后，我可以触摸并将列表移到顶部。

为了更好地理解，我将这部电影发布到 YouTube 上，我在其中操作 iPad 以显示上面的 HTML。

-webkit-overflow-scrolling: touch 示例
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 是它的 repo。

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

此示例需要 Node.js 来运行服务器。

最好的问候。

Answer 1

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