我刚刚做了一个网页但是Mobile Safari（iPhone和iPad iOS 5.0.1）中有一个错误，其中两个按钮固定在右上角和右下角。
直到在打开页面其余部分的文本框上单击提交后，按钮才会淡入...在页面的其余部分加载并且按钮淡入后，您可以单击它们中的任何一个并且他们都工作......
然而，单击它们会导致程序化滚动，滚动完成后，您不能再点击任何一个按钮，直到您用手指滚动页面，即使只是一个小像素滚动...
我注意到的是，在程序化滚动之后，如果你点击TOP按钮的下方，你会看到高亮显示，就好像你点击了BOTTOM按钮并处理了底部按钮的动作，这告诉我错误是当以编程方式滚动时，固定位置按钮仍然与页面的其余部分一起移动，并且在执行实际触摸滚动之前不会返回到固定位置....
有没有人知道解决这个问题的方法..？
我添加了一个弹出窗口，显示按下了哪个按钮，以便您可以测试它，请记住在第一次按下向下按钮（有效）后再次按下按钮，它将无法正常工作，但请点击下方向上按钮，你会看到发生的向下按钮动作......
感谢您的帮助。
托马斯
（如果你可以指出我可以向苹果公司提交一个错误的地方，除非已经存在，否则也是好的）
编辑：只需点击任一提交箭头，您就不需要输入默认值的工资/薪水
编辑2：这是一个更简单的例子来展示同样的问题..
http://www.tsdexter.com/MobileSafariFixedPosBug.html
编辑3：向Apple报告错误
答案 0 :(得分：28)
我们在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" });
});
答案 1 :(得分：13)
我通过添加一个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。
查看示例here。
答案 2 :(得分：7)
我在单独的固定元素上有多个链接（模态弹出+固定遮光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的当前宽度，然后设置宽度。
答案 3 :(得分：4)
如果像我一样，这是我的解决方案，以前的解决方案都不适合你。
诀窍是：
这是一个例子：
$('body').animate({
scrollTop: newPos}, 1000, 'jswing', function () {
$('header').css({position:'absolute', top:newPos});
});
$(document).bind('touchmove',function(){
$('header').css({position:'fixed', top:'0px'});
});
我对粘性页脚和其他浮动固定元素使用了相同的技巧。
答案 4 :(得分：3)
这种变化也适用于我。试图不在移动设备上使用框架。
var d = document.createElement("div");
d.style.height = "101%";
d.style.overflow = "hidden";
document.body.appendChild(d);
window.scrollTo(0, scrollToM);
setTimeout(function() {
d.parentNode.removeChild(d);
}, 10);
答案 5 :(得分：2)
花了几个小时后，我找到了一个解决方法：尝试滚动（可能带动画），然后再次滚动到同一点（没有动画）。
这样就强制浏览器从视图中删除错误的渲染。
示例：
$('body, html')
.animate({scrollTop: 0})
.scrollTop(0);
答案 6 :(得分：1)
iOS5和JQueryMobile遇到了同样的问题。固定标题＆amp;页脚。可扩展的内容，突然我有一个鬼脚，你可以看到但不触摸。 我有一个问题，直接改变位置绝对然后回去工作。它似乎只在某些时候起作用。 我最终使用了它。
$(myFixedFooter).css("position", "relative").hide(0, function () {
$(this).show(0).css("position", "");
});
这蔑视地创造了一个＆＃34; blip＆＃34;当页脚做它的事情。然而，我发现页脚的大约98％的时间都停留在页面底部。我找到并尝试过的所有其他工作和调整并不总是将页脚放在底部，或者他们一开始并没有解决问题。
希望Apple能尽快解决。
答案 7 :(得分：0)
我发现了你在我写的iPhone应用中描述的确切行为。我在右侧加载了一堆带有索引的HTML文本。从菜单中选择一个项目并滚动文本后，菜单将变得无响应（因为着陆区已从其下滚动）。我还看到，即使文本的一小部分卷轴也会重新启用索引菜单。
我创建了一个测试用例并在此处上传了文件（如果您在非iPhone浏览器上查看此文件，请将窗口垂直放置以查看正确的行为）：
http://www.misterpeachy.com/index_test.html
在我点击B然后再次点击B之后，我发现索引菜单正在滚动文本（即使可见菜单没有移动）。它不是滚动到B（基本上没有移动），而是滚动到D。
现在我被困住了。我希望我可以添加一些JavaScript代码（我从来没有在JavaScript中编程，所以这是一个小问题），在我将手指从菜单项上抬起后（在文本滚动后）将文本滚动一个像素当然，到选定的地方）。也许JavaScript可以检测滚动，然后添加另一个滚动。
答案 8 :(得分：0)
如果它可以帮助某人：
我遇到了完全相同的问题，我的代码看起来像这样（这是一个单页的webapp）：
window.scrollTo(0,0);
$('section.current').removeClass('current');
$(target).addClass('current');
我花了好几个小时尝试一切（101％高度div，改变位置类型......），但最后Device-Bugs上描述的最后一个建议终了一天。在我的情况下，只是在不渲染div时滚动的问题：
$('section.current').removeClass('current');
window.scrollTo(0,0);
$(target).addClass('current');
答案 9 :(得分：0)
解决方案的另一个变体是将文档宽度的大小增加1px，然后立即撤消它。这样做的好处是不会创建任何更多的元素，也没有任何我经历过的闪烁。
答案 10 :(得分：0)
示例代码
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
$(document).on('focus', 'input, textarea', function() {
$('header').css({'position':'static'});
});
$(document).on('blur', 'input, textarea', function() {
$('header').css({'position':'fixed'});
});
}