I have a problem with html5 app in ios7. It's easier to explain it at the screenshots:
At the start everything is fine - https://www.dropbox.com/s/x03b2blcqjptvpi/1.jpeg?dl=0
When I touch text input it's still ok (page scrolls down to the input)
After blur (when keyboard is hiding) the screen is scrolling back, but over 20px too much and it looks like this - https://www.dropbox.com/s/qpbbd1903tfb4qt/3.jpeg?dl=0
I've tried everything (including all possibilities of apple-mobile-web-app-status-bar-style meta tag) and it's still not working. I wonder why ios7 scrolls my app under status bar, even if at the start of the app it's ok. Does anyone have any idea?
Related
I'm having a problem with on iOS quite unusual - on a form-style screen when I need to type information into a field, the keyboard pops up, but the screen doesn't go up nor allow scrolling, making it impossible to see what I'm typing.
In CSS, I'm using this within classes:
overflow-x: scroll -webkit-overflow-scrolling touch;
overflow: hidden -webkit-transform translate3d (0,0,0);
The curious thing is that on Android is normal...
Why is this happening? What should I do?
The keyboard on iOS behaves in a very special way, here's a quote from a great article on this topic The Eccentric Ways of iOS Safari with the Keyboard:
The fundamental problem is that when the soft keyboard appears due to a user tap on a text input box near the bottom of the screen, Safari doesn’t resize the browser window but instead moves it upward such that it is partially offscreen
You're likely preventing the body to move up, so make sure there's no code that would interfere with that.
Say you've got a Xcode app with embedded web view exposing a simple HTML5 page.
This page has a title and an input tag and a nav top bar (position: fixed; top:0;).
When the user tap in it the first time, the whole screen scrolls up to enable the keyboard appears while maintaining the input tag visible, when I tap the enter button.
The issue I face is that my HTML is not restored identically (I mean, it scrolls down back, but my top bar is shifted about 10 pixels below the top edge of the screen.
But when I tap the keyboard hide button, the scrolls restore my initial view, with no issue.
Anyone experienced the issue before? Any clue of what going on or a way to work around this?
Ps: issue is present on iOS 7 (7.1.2). I didn't tested on iOS 8 as my app must support iOS 7.
I finally ended up with adding an explicit keyboard withdrawing by applying blur() the the input as follows:
<input ng-change="$(this).blur()">
This immediately makes the keyboard disappearing, while the hw initial scrolling is reversed.
To fix the auto scaling issues to render my webpage on an iOS device, I've added the viewport meta tag,
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum- scale=1,user-scalable=no">
and I've added device specific styling through media queries for iPhone and iPad, This fixed the scaling issues on switching between portrait/landscape orientations.
The problem now is that when I shift focus to an input field(bringing the keyboard up) and shifting to landscape orientation with the keyboard on(auto scaling happens fine) and when I switch orientation back to portrait mode(with the keyboard still on), the UI gets distorted, i.e., some extra length gets added to the viewport width which either appears as black area or part of the same viewport being repeated again. And if I bring down the keyboard and switch orientations again, the added space gets removed and the UI gets back to normal again. This happens only with the keyboard on. I'm using mobile safari as my browser.
I've been working with Mobile Safari for years now, and one thing I've learned -- it's so buggy when it comes to orientation changes when an input has focus.
Saying that, here's a small script that might help you out.
window.addEventListener('orientationchange', function(){
document.body.style.paddingRight = '1px';
setTimeout(function(){
document.body.style.paddingRight = '';
}, 50);
}, true);
This basically forces the browser to reflow/re-calculate the layout, which should hopefully address the situation you're seeing.
Fiddle with an easy to reproduce bug: https://jsfiddle.net/LYn54
Fiddle with the fix: https://jsfiddle.net/gQR4m
Hope this helps!
I'm building an iOS wrapper application for a web page, which was built using Bootstrap, at the top of my web app is a .navbar div, not fixed or anything and displays perfectly on first load.
The problem starts when I touch an input, type and then hide the keyboard. Once the keyboard has hidden the page has been moved back down, but the navbar is nowhere to be seen.
It turns out this was caused by a bug in the CSS code which gave a margin to the body. The simplest way to fix this was to change the CSS. Although I'm still none-the-wiser as to how control the UIWebView in such situations.
I am writing an app for IOS and Android using Flex 4.6. Everything is working fine on Android, but on IOS after the softkeyboard appears and the screen pans, when the keyboard is dismissed the screen never pans back down. The bottom half of the screen stays white and the top half remains shifted out of view. I have been searching online and through my code trying to figure out what could be wrong and I've had no luck. I have been running the program in debug mode, but no AS3 error messages are shown. My trace()s are printed, and the app will continue to work but obviously you are unable to interact with the top half of the app. Everything works fine if I set the softkeyboardBehavior in the XML to none, but then the user can't see where they are typing.
I have only been able to test this on my IPod touch with IOS 5.0.1. When I try to run my project in Flash Builders simulator neither the Android nor the IOS version will get past the splash screen.
Any help would be greatly appreciated
Thank you
I have seen that the softKeyboardDeactivate event from TextInput is not fired, as other actions that the unpan should cause are neither fired.
It seems it's a Flex 4.6 version bug. (http://forums.adobe.com/message/4068144).
I've found a workaround, it's a little tricky but it works.
Put a new TextInput hidden on top of the View, then on focusOut event on the original TextInput, force focus on the hidden TextInput. Softkeyboard event will be activated for that TextInput and the pan will return to the top of the View, then take off the focus from the new TextInput and the softkeyboard will disappear.
The user will not notice about this tricky solution.
<s:TextInput id="ghost" x="-100" y="0" width="0" height="0"/>
<!-- ... -->
<s:TextInput id="original" focusOut="textInputFocusOutHandler(event)"/>
...
public function textInputFocusOutHandler(event:FocusEvent):void
{
this.ghost.setFocus();
callLater(this.setFocus);
}
Try adding the "enter" attribute to your TextInput. It worked for me but now I have the issue where it jumps vs. pan when the soft keyboard deactivates.
It seems that my problem was that I was using the StageText skin for my text boxes, which adobe says in the documentation causes panning and any type of scrolling not to work. Switching to the old TextInput skin seems to fix the problem, but you loose all the native features for the soft keyboard, which pretty much ruins your user experience unfortunatly.