iOS8 Safari浏览器-webkit-overflow-scrolling:touch; 问题
所以我们正在为一个客户端构build这个networking应用程序,它在Safari上完美地运行在iOS7上。 但是,当我们在iOS8中查看应用程序时,它有一些巨大的错误。
- 如果用户打开边栏并将其closures,则
<section style="overlay-y: scroll;"></section>
消失(重叠的部分)。 - 有些button因任何原因停止工作。 (
<a href="">Lala</a>
)
当我们删除-webkit-overflow-scrolling: touch;
从容器(拥有所有内容的div),一切都完美无瑕,像以前一样…
任何想法可能是什么?
我有这个相同的问题! 到目前为止,我找不到一个真正的解决scheme,但有一个不太理想的解决方法:
假设#container有-webkit-overflow-scrolling: touch
属性集,这个jQuery应该可以帮你:
$('#container').css('-webkit-overflow-scrolling','auto');
或为JavaScript(未经testing):
document.getElementById('container').style.webkitOverflowScrolling = 'auto';
这将禁用页面上平稳的轮盘式滚动。 所以这不是理想的,但是你的页面现在应该正确滚动。
编辑:
一些进一步的研究导致我们发现了一个更加棘手的方法来解决这个问题,同时保持平滑的触摸滚动工作。 假设你有-webkit-overflow-scrolling: touch
CSS的某处,你可以在你的JS“切换”它。 我不知道你有什么显示/隐藏菜单,但希望你可以利用这一点。
function toggleMenu(){ $('#container').css('-webkit-overflow-scrolling','auto'); //...Existing code setTimeout(function() { $('#container').css('-webkit-overflow-scrolling','touch'); },500); }
没有setTimeout,这对我没有任何作用。 希望这可以帮助你或其他人。
我在iOS8有这个问题,我的所有button绑定到单击事件不能正常工作。 一般来说,我们将有300毫秒的延迟,但在某些时候,我需要按几次以上才能触发它。
所以我也发现这个解决scheme在我的工作。 点击添加touchend。
button.on('click touchend', function(event) { // this fires twice on touch devices });
你可以看到他们在这里讨论的论坛。
JavaScript touchend与点击困境
我希望这个帮助。
你的边栏animation是否有CSSanimation?
我有一个cordovanetworking应用程序相同的错误。 经过一番尝试,我发现问题是由通过CSSanimation进行animation制作的父级<div>
(侧边栏)引起的,并具有属性animation-fill-mode: forwards;
删除此属性解决了问题,并恢复了预期的-webkit-overflow-scrolling: touch
行为
我的答案是:
$('#container').css('-webkit-overflow-scrolling','auto');
以前的解决scheme不起作用:
document.getElementById('container').style.webkitOverflowScrolling = 'auto';