在scrollTop以编程方式更改后,固定定位按钮上的移动Safari错误...？

Question

我刚刚做了一个网页但是Mobile Safari(iPhone和iPad iOS 5.0.1)中有一个错误,它有两个固定在右上角和右下角的按钮.

直到在打开页面其余部分的文本框上单击提交后,按钮才会淡入...在页面的其余部分加载并且按钮淡入后,您可以单击它们中的任何一个并且它们都可以工作...

但是,单击它们会导致编程滚动,滚动完成后,您不能再点击任何一个按钮,直到您用手指物理滚动页面,即使只是一个小像素滚动...

我注意到的是,在程序化滚动之后,如果你点击TOP按钮的下方,你会看到高亮显示,就好像你点击了BOTTOM按钮并处理了底部按钮的动作,这告诉我当滚动时的错误以编程方式,固定位置按钮仍然与页面的其余部分一起移动,并且在执行实际触摸滚动之前不会返回到其固定位置....

有没有人知道解决这个问题的方法..？

我添加了一个弹出按钮,显示按下了哪个按钮,以便你可以测试它,记得在第一次按下向下按钮(有效)后再次按下按钮,它将无法工作,但点击向上按钮下方你会看到发生的向下按钮动作....

http://www.tsdexter.com/ceos

谢谢您的帮助.

托马斯

(如果你能指出我可以向苹果公司提交一个错误的地方,那也是好的,除非已经有了)

编辑:只需单击任一提交箭头,您无需输入其默认的工资/薪水

编辑2:这是一个更简单的例子,显示相同的问题..

http://www.tsdexter.com/MobileSafariFixedPosBug.html

编辑3:向Apple报告错误

Answer 1

我们在2个不同的iPad应用程序中也遇到了这个错误,对我们来说最好的解决方法是在动画滚动完成后暂时从固定元素中删除固定位置,然后使用window.scroll和我们刚刚执行动画的垂直值滚动到,然后最终重新应用固定样式的位置.它会导致一个非常小的昙花一现,因为ipad重新渲染元素,但它比bug更可取.

var $fixedElement = $('#fixedNavigation');
var topScrollTarget = 300;
$("html:not(:animated),body:not(:animated)").stop().animate({ scrollTop: topScrollTarget }, 500, "swing", function(evt) {
    $fixedElement.css({ "position": "relative" });
    window.scroll(0, topScrollTarget );
    $fixedElement.css({ "position": "fixed" });
});

Answer 2

我通过添加一个101%的高div然后(几乎)立即删除它来解决它.

尝试:

<style>
.iosfix {
  height: 101%;
  overflow: hidden;
}
</style>

当你滚动:

window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
  $('.iosfix').remove();
}, 500);

它也适用于jQuery.scrollTo.

在这里查看示例.

Answer 3

我在单独的固定元素上有多个链接(模态弹出+固定遮光div +普通固定工具栏)并且这些答案都没有工作,所以我有一个关于在同一主题上尝试变化的修补程序.像所有这些建议关键是重新渲染元素.

最初我尝试将1px添加到固定元素的宽度并删除它.这确实导致重新渲染,但重新渲染的元素与非重新渲染的元素错位 - 这是我怀疑的这个iOS错误的另一个结果.答案是简单地添加到身体的宽度并再次减去(或设置为自动),即:

//jQuery will calculate the current width and then +1 to this and set it
$('body').css('width', '+=1');

//Remove width css
setTimeout(function() {
  $('body').css('width', '');
}, 1);

如果不使用jquery,则需要获取body + 1px的当前宽度,然后设置宽度.