问题与iOS 7移动Safari滚动键盘上下滚动事件 [英] Issue with iOS 7 Mobile Safari Scroll Events on Keyboard Up and Down

问题描述

我正在测试一些滚动事件，并注意到在iOS 7移动版Safari中有一个滚动事件在键盘上触发，但没有在键盘上打开/关闭。我想知道是否有人知道这是为什么？

我个人认为这是一个错误（并且正试图报告它，但目前无法登录到错误跟踪器），并且他们应该选择抛出在两个键盘上向上和向下滚动事件，或者选择不抛弃它们，因为看起来视图返回到它之前的状态。为了演示这个问题，我创建了这个小站点，您可以点击输入框并查看滚动事件在键盘上触发，但在完成时不会触发在键盘菜单上按下并且屏幕滚动到它的初始位置。我添加了一个可扫描的qr代码，可以将您发送到下面的测试网址。提前致谢！

测试网址： http://lp.mydas.mobi/test/cs/scroll_issue/error.html

TEST qr：

解决方案

冉有一天在Phonegap应用程序中进入这个问题，但行为似乎与新的Safari一致。

据我所知，新的Safari会在键盘启动时调整报告给网页的视口。我有一个高度为100％的页面和一个绝对位于页面底部的导航栏。当键盘出现时，导航就随之而来。令人烦恼的是，这导致我的输入字段中的两个失去焦点，隐藏它们，并使其无法完成登录！

以前，我避免使用 height = device -height ，因为OLD Safari似乎不了解状态栏的任何内容，并且报告的设备高度始终为20px太高，导致20px滚动查看页面的最底部。

我最终使用的修正是设置 height = device-height ，并且iOS7没有任何与视口大小调整有关的问题/ nav重叠。令我惊讶的是，在所有情况下，页面仍然是设备高度的100％。

 < meta name =viewportcontent =width =设备宽度，高度=设备高度，用户可扩展=无> 
  

为了使这种固定高度的情况与iOS5和6一致，我做了一些小设备检测并手动计算设备高度 - 20像素，重置视口标记。

 函数iOSversion（）{
 if /iP(hone|od|ad)/.test(navigator.platform））{
 //支持iOS 2.0及更高版本：< http：//bit.ly/TJjs1V> 
 var v =（navigator.appVersion）.match（/ OS（\ d +）_（\ d +）_？（\ d +）？/）; 
 return [parseInt（v [1]，10），parseInt（v [2]，10），parseInt（v [3] || 0,10）]; 
} 
} 
 
 ver = iOSversion（）; （ver [0]> = 5& ver [0]< = 6）{
 $（'head meta [name =viewport]'）的
 
 .attr（content，width = device-width，height =+（window.innerHeight-20）+，user-scalable = no）
} 
  

我觉得这个解决方案有点错，但是在一个摇滚（新的Safari）和一个困难的地方（旧的Safari）之间，这是我的答案。

如果您找到更好的方法，请请让我知道！祝你好运：）

I am testing some scroll events and noticed that there is a scroll event fired in iOS 7 Mobile Safari on keyboard up, but not on keyboard dismiss/down. I was wondering if anyone has any knowledge to why this is?

I personally think that this is a bug (and am trying to report it but can't login to bug tracker at the moment), and that they should pick to throw scroll events on both keyboard up and down, or choose to not throw them at all since it seems that the view returns to its previous state.

To demonstrate the issue I created this little site where you can click on the the input box and see that a scroll event fires on keyboard up, but does not fire when done is pressed on the keyboard menu and the screen scrolls to it's initial position. I added a scannable qr code that sends you to the test url also below. Thanks in advance!

TEST URL: http://lp.mydas.mobi/test/cs/scroll_issue/error.html

TEST qr:

解决方案

Ran into this issue the other day in a Phonegap app, but the behavior seems consistent with the new Safari as well.

As best I can tell, the new Safari resizes the viewport reported to the web page when the keyboard is up. I had a page with height of 100% and a nav absolutely positioned at the bottom of the page. When the keyboard came up, the nav came with it. Annoyingly, this caused 2 of my input fields to lose focus, hiding them and making it impossible to complete the login!

Previously, I avoided using height=device-height in the viewport meta tag because OLD Safari didn't seem to understand anything about the status bar, and the reported device-height was always 20px too tall, resulting in 20px scroll to see the very bottom of the page.

The fix I ended up using was setting height=device-height and iOS7 didn't have any of the issues with the viewport resizing/nav overlap. To my surprise, the page remained 100% of the device height in ALL cases.

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">

To get this fixed-height situation to work consistently with iOS5 and 6, I did a little device detection and manually calculated the device height - 20 px, resetting the viewport tag.

function iOSversion() {
  if (/iP(hone|od|ad)/.test(navigator.platform)) {
    // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
    return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
  }
}

ver = iOSversion();

if (ver[0] >= 5 && ver[0] <= 6) {
  $('head meta[name="viewport"]').attr("content", "width=device-width, height="+(window.innerHeight-20)+", user-scalable=no")
}

I feel kind of wrong about this solution, but stuck between a rock (new Safari) and a hard place (old Safari), this was my answer.

If you find a better way, please please please let me know! Good luck :)

这篇关于问题与iOS 7移动Safari滚动键盘上下滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！