-webkit-overflow-scrolling:touch; Apple的iOS8中断了

Question

我正在开发一个网络应用程序,它-webkit-overflow-scrolling:touch在几个地方使用,以提供溢出的divs惯性滚动.

自从更新到IOS8后,-webkit-overflow-scrolling: touch停止了你能够滚动的任何东西,到目前为止我能够解决这个问题的唯一方法是删除-webkit-overflow-scrolling: touch标准的粘性滚动.请帮忙!

以下是适用于iOS5,6和7的标准类之一的示例:

.dashboardScroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
    -webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
} 

Answer 1

我有一个类似的问题,一个(非常复杂的)嵌套的可滚​​动div在iOS 5,6和7中滚动得很好,但是间歇性地无法在iOS 8.1中滚动.

我找到的解决方案是删除使用GPU欺骗浏览器的所有CSS:

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

通过这样做,'-webkit-overflow-scrolling:touch;' 仍然可以包括在内,仍然可以正常运作.

它确实意味着牺牲了(对我来说,可疑的)上述黑客在早期版本的iOS中所提供的滚动性能,但是在惯性滚动之间的选择中,惯性滚动被认为更重要(我们不支持iOS 5了.

在这个阶段我不能说为什么存在这种冲突; 它可能是这些功能的一个糟糕的实现,但我怀疑在CSS中有一些更深层次的东西导致它.我目前正在尝试创建一个简化的HTML/CSS/JS配置来演示它,但可能需要大量的标记结构和大量的动态数据才能实现.

附录:但是,我确实必须向我们的客户指出,即使使用此修复程序,用户也开始尝试滚动不可滚动的元素,她必须在停止之后等待一秒钟才能滚动可滚动元素.这是本机行为.

Answer 2

我有这个问题,并找到了解决方案.解决方案是,你必须将你的内容放入两个容器中,用于ex :(.dashboardScroll> .dashboardScroll-inner)并给内部容器".dashboardScroll-inner"比父级".dashboardScroll"高出1px这个css3属性

.dashboardScroll-inner { height: calc(100% + 1px);}

看看这个:

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

或者如果你不能添加另一个容器,请使用:

.dashboardScroll:after { height: calc(100% + 1px);}

Answer 3

我在Cordova网络应用程序中遇到了同样的问题.对我来说,问题是我有一个<div>动画的父母,并拥有该属性animation-fill-mode: forwards;

删除此属性解决了问题并修复了损坏的溢出滚动.