webkit-overflow-scrolling forms broken on iOS 7 full-screen web app

瘦欲@ 提交于 2019-12-18 11:29:15

问题


I'm having trouble with a full-screen (saved to home screen) iPhone web app on iOS7.

Typically, when an input is selected, it has scrolled into view above the keyboard.

However, this doesn't seem to happen on iOS7 for scrolling DIVs in a full-screen web app.

Thus, when a DIV uses "-webkit-overflow-scrolling: touch" and an input in the bottom half of the screen is clicked, the keyboard is fired, but the input doesn't scroll up.

AND, at that time, the input won't respond to any further onFocus events that I could otherwise scroll it up with.

Anyone seen a workaround?


回答1:


Updating the viewport meta tag fixed it for me.

I changed this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

To this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

height=device-height is the actual fix (without it the viewport gets resized to accommodate the keyboard).




回答2:


It worked on my WebApp by removing the height settings.



来源:https://stackoverflow.com/questions/18949647/webkit-overflow-scrolling-forms-broken-on-ios-7-full-screen-web-app

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!