使用-webkit溢出滚动在iOS 5中滚动的问题

问题描述:

我有一个固定高度的HTML页面div应该可滚动(仅垂直)。在iOS 5中这可以通过以下方式实现:使用-webkit溢出滚动在iOS 5中滚动的问题

overflow-y: auto; 
-webkit-overflow-scrolling: touch; 

DIV包含约10个项目的无序列表。

滚动工作,但有时它只会滚动我的手指对角线,甚至水平,而不是垂直,因为它应该是。

我想知道是否有人遇到过这个问题。我不想认为这是iOS5中的一个错误,但我无法弄清楚我做错了什么,因为大部分时间它工作正常。

+0

我们可以得到一个演示链接吗? – Charlie

+1

您是否找到修复或解决方法?我遇到了同样的问题,无法绕过它... – JohannesD

+0

我开始了一个赏金,所以我可以给它[保罗](http://*.com/a/8707635/458193)。 –

我有完全相同的问题。问题原来是由我的网站用于跟踪历史更改和加载脚本的两个零大小的iframe引起的。删除这些解决了这个问题。我向苹果提交了一个bug,等待他们回复。

检查您的页面上是否有任何iframe,它们可能是原因。

+0

您是否听说过Apple的任何内容?或者您是否找到了另一种解决方法,而不是删除iframe?当试图让-webkit-overflow-scrolling与[tag:vaadin]一起工作时,我遇到了这个问题。 – JohannesD

+0

碰到这个,看到类似的问题:http://*.com/questions/10718296/ios5-overflow-scrolling-horizo​​ntally-is-controlled-by-vertical-touch纵向和横向之间翻转似乎解决了这个问题。不知道原因,但(我的网页上没有iframe)。 – middric

+0

不,翻转并没有改变任何东西 - 至少对我来说 – Thariama

你需要把这个CSS设置在你的CSS文件 - 你加载一个使用content_css配置变量:

body { 
    -webkit-transform: translate3d(0, 0, 0); 
} 

另一种选择是直接从TinyMCE的初始化代码设置CSS:

$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0)); 
+0

没有为我工作。 –

我已经找到了解决方案哈克,但它需要的JavaScript ...

我偶然发现了这个问题,同时加载通过滚动的节点ajax并添加js。

我发现,与JS重置-webkit-溢出滚动财产化险为夷

JS代码:

var myDiv = $('.myDiv'); 
myDiv.css('-webkit-overflow-scrolling','auto'); 
function fn(){ 
    myDiv.css('-webkit-overflow-scrolling','touch'); 
} 
setTimeout(fn,500); 

真的很讨厌我们必须调用setTimeout方法,但是这就是只有我能想到的办法......

编辑:当心display:none

Webkit overflow scrolling touch CSS bug on iPad

+0

谢谢!这是hacky,但就我而言,这首先是一个iOS错误。 –

我在iOS 5.1.1中遇到了同样的问题,原因是::after伪元素position: fixed位于包含可滚动列表的元素,该列表显示“错误的滚动轴”行为。 Details here