移动Safari浏览器的bug在固定定位button后scrollTop编程更改…？

我只是做了一个网页，但有一个错误在移动Safari（iPhone和iPad的iOS 5.0.1）与两个button，固定在右上angular和右下angular..

这些button不会淡入，直到点击提交文本框后，打开到页面的其余部分…在页面的其余部分加载后，button淡入，你可以点击任一个，他们都工作…

但是，单击它们会导致程序化滚动，在滚动完成之后，不能再单击任一个button，直到用手指滚动页面，即使只是一个小小的像素滚动条。

我注意到的是，在编程滚动之后，如果轻按TOPbutton的下方，就会看到突出显示，就像在点击BOTTOMbutton并处理底部button的操作，这就告诉我这个错误是滚动以编程方式，固定位置button仍然与页面的其余部分一起移动，不会回到它的固定位置，直到执行实际的触摸滚动。

有没有人知道这个方法？

我已经添加了一个popup窗口，显示哪个button被按下，所以你可以testing它，记住第一次按下button（工作）再次按下button，它将无法正常工作，但点击上方button下方和你会看到向下button的动作发生….

http://www.tsdexter.com/ceos

谢谢您的帮助。

托马斯

（如果你能指出我可以向苹果提交一个错误的地方，除非已经有了）

编辑：只要点击任一提交箭头，你不需要input一个工资/薪水它有默认值

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

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

编辑3：报告给苹果的错误

Answer 1

我通过添加一个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 2

我们还在2个不同的iPad应用程序中遇到了这个错误，对于我们来说，最好的解决方法是在animation滚动完成后暂时从固定元素中移除固定位置，然后使用window.scroll和垂直值执行animation滚动到，然后最后重新应用位置固定样式。 它确实会导致一个非常小的blip，因为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 3

我有多个单独的固定元素（模式popup式+固定遮挡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，然后设置宽度。

Answer 4

如果像我这样的解决scheme，以前的解决scheme都不适合你。

诀窍是：

• 做你的滚动（animation或滚动到等）
• 就在你滚动之后，立场：绝对的你的固定元素
• 在“touchmove”事件中，恢复位置：固定

这里是一个例子：

  $('body').animate({ scrollTop: newPos}, 1000, 'jswing', function () { $('header').css({position:'absolute', top:newPos}); }); $(document).bind('touchmove',function(){ $('header').css({position:'fixed', top:'0px'}); }); 

我用粘滞页脚和其他浮动固定元素相同的技巧。

Answer 5

这个变化也适用于我。 试图不使用框架，我可以在移动。

  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); 

Answer 6

花了几个小时后，我find了一个解决方法：尝试滚动（也许与animation），然后再次滚动到同一点（没有animation）。
这样你强制浏览器从视图中删除错误的渲染。

例：

 $('body, html') .animate({scrollTop: 0}) .scrollTop(0); 

Answer 7

我遇到了与iOS5和JQueryMobile相同的问题。 固定页眉和页脚。 可扩展的内容，突然我有一个鬼脚，你可以看到，但没有触及。 我有一个问题，直接改变立场绝对然后回到工作。 似乎只有一些时间。 我结束了使用这个。

  $(myFixedFooter).css("position", "relative").hide(0, function () { $(this).show(0).css("position", ""); }); 

这样做会在页脚完成时产生一个“昙花一现”。 Hoever，我发现大约98％的时间页脚停留在页面底部。 所有其他的工作和调整，我发现和尝试并不总是离开页脚在底部，或他们没有解决问题摆在首位。

希望苹果很快就能修复。

Answer 8

我发现了你在我写的一个iPhone应用程序中描述的确切行为。 我在右侧加载了一堆带有索引的HTML文本。 从菜单中select一个项目并滚动文本后，菜单将变为无响应状态（因为着陆区已从下面滚动出来）。 我也看到，即使是一个小小的文字滚动将重新启用索引菜单。

我创build了一个testing用例，并在这里上传文件（如果您在非iPhone浏览器上查看，请垂直放置窗口以查看正确的行为）：

http://www.misterpeachy.com/index_test.html

我发现索引菜单是滚动与文本（即使可见的菜单不动），然后我点击B，然后再次点击B. 而不是滚动到B（基本不移动），它滚动到D.

现在我卡住了。 我希望我可以添加一些JavaScript代码（我从来没有用JavaScript编写过程，所以这是一个小问题），将我的手指从菜单项上抬起后滚动文本一个像素（文本滚动后到选定的地方，当然）。 也许JavaScript可以检测到滚动，然后添加另一个滚动。

Answer 9

如果它可以帮助某人：

我有完全相同的问题，我的代码看起来像这样（这是一个单页的Web应用程序）：

 window.scrollTo(0,0); $('section.current').removeClass('current'); $(target).addClass('current'); 

我花了几个小时尝试一切（高度为101％，改变位置types…），但最后在Device-Bug上描述的最后一个build议保存了一天。 在我的情况下，这只是一个滚动的问题，当div不呈现：

 $('section.current').removeClass('current'); window.scrollTo(0,0); $(target).addClass('current'); 

Answer 10

解决scheme的另一个变体是将文档宽度的大小增加1px，然后立即撤消它。 这具有不会创造更多元素的优点，也没有我经历过的任何闪烁。

https://stackoverflow.com/a/11479118/43217

Answer 11

示例代码

 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'}); }); }