移动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:报告给苹果的错误

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

在这里看到一个例子。

我们还在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" }); }); 

我有多个单独的固定元素(模式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,然后设置宽度。

如果像我这样的解决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'}); }); 

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

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

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

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

例:

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

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

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

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

希望苹果很快就能修复。

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

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

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

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

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

如果它可以帮助某人:

我有完全相同的问题,我的代码看起来像这样(这是一个单页的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'); 

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

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

示例代码

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