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.
Related
I am having a strange problem with input in ios safari
as shown here.
The input is part of an angular app and has some basic checks for ng-length and ng-pattern. Initially as you type all the characters are showed, but if you play around with the page a bit, like tapping out, scrolling up and down, then tapping in again only the first 2 letters of what you type will show and the rest will be invisible, but the cursor will still move.
The input also uses a custom web font, but removing it did not fix the problem.
Is this a known bug and is there a workaround?
You can add
transform: translate3d(0, 0, 0);
to the input's style.
This will form a new stacking context and solve the problem.
I found my problem: an iframe being positioned absolute, hidden, from which I listen to the resize event as a solution of monitoring a div width. Removing position:absolute from it fixed it.
I came across a weird scrolling issue on iOS (7 or 8) shown on www.cahri.com/tests/scroll
How to reproduce?
Open the example page on an iPhone/iPad/iOS Simulator in landscape
Touch with your right thumb the main content (right side) and scroll up or down
Release your right thumb
Touch with your left thumb the left side (which is a div with overflow: scroll) and try to scroll: the page scrolls instead of the div. Release your left thumb.
It may take a couple of tries to reproduce, please get back to 2 if the page is not scrolling.
Touch again with your left thumb the left side, now it scrolls correctly
Would you have any idea what is causing the issue? And how would one fix this issue?
iOS web browsers still run into issues with fixed positioned elements (as is your left div) and scrolling. In the many web projects I have done this seemingly always causes issues/bugs that are somewhat inexplainable. I know this is not an exact answer, but I'm just sharing that I've been down this road before :)
Best solution is to either use a method that gets away from fixed positioning and scrolling for mobile devices or a third party scroll library like: http://cubiq.org/iscroll-5
I've had a lot of success with them on iOS devices.
If you wanted a different solution for mobile, you could use media queries to change positioning on elements.
#media screen and (max-width: 600px) {
.column-left { ... }
}
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.
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 developing a Phonegap app for the major os platforms and am currently testing it on an iPad with iOS 5. Im using jquery mobile. So for large screens i've used the splitview jquery mobile plugin. http://asyraf9.github.com/jquery-mobile/
I've put a
$scrollArea.css('overflow-y','auto');
$scrollArea.css('-webkit-overflow-scrolling','touch');
to make the page scroll instead of using iscroll like the plugin was using. Now whats happening, is that the page isn't loading/repainting as the user scrolls. I have a list of 100 items and i scroll through them. The scrolling itself isn't slow, but it takes almost a full second for the new list view rows to pop into view after it has been scrolled. Before that it's a blank area.
On observing, i can see that the the list items don't pop into view until the scrolling has come to a halt. (momentum scroll)
A similar issue is here http://forum.jquery.com/topic/help-with-slow-list-view-scrolling-on-ipad-when-scrolling-in-an-overflow-auto-div
What can i do to make this work normally?? The same thing works fine on android tabs. pls help.
EDIT: If i use only
$scrollArea.css('overflow-y','auto');
then i dont face this issue of momentary blank areas after scrolling, but then the scrolling is painfully slow.
Please don't suggest using iScroll. Already tried that. its much much slower that what i get with -webkit-overflow-scrolling, and i cant use it.
My Approach
So, I tried a lot and I read even more about this problem. I ended up with a solution which is "OK" to me (because it works), but which is definitely not near to "perfect".
When using this CSS:
.container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
you run into a lot of problems when having a complex design (in my case a fullscreen background image), and it gets even worse, when using absolute positioned elements and iframes. (Which is - of course - both the case I needed).
So, what did the trick? Basicly this CSS:
.container > * {
-webkit-transform: translate3d(0,0,0);
}
With this rule the content was almost all the time rendered right away without getting those blank areas. Only when scrolling down the first time very fast it's a little flickering.
But be careful with the rule -webkit-transform: translate3d(0,0,0);. Using this rule heavily on many child elements forced Safari to: sometimes slow down but almost all the time to crash. The best thing is to wrap all content elements into a single div, works fine.
Done? Not really. There is still the iframe-issue: ("argh")
iframe
When the iframe is not fully in the visible part of the container at the start it gets cropped or is not even displayed at all. This could sometimes also occur when scrolling around. So, I tried to force Safari to re-render this part anytime scrolling is completed and came up with this:
//using jQuery
var container = $('#container');
var iframe = $('#iframe');
container.scroll( function (event) {
iframe.css( 'marginLeft', 1 );
setTimeout( function() {
iframe.css ( 'marginLeft', 0 );
}, 1 );
});
The thing with the scroll event on a touch device is, that it's only triggered when the scrolling has come to an end, so this function is not fired at anytime but when the momentum has come to an end. The short movement is actually not visible.
So, maybe this is helpful for somebody.
Further information
Here a few more links on this issue:
On how the scroll event is fired in iOS:
javascript scroll event for iPhone/iPad?
Bug report of this problem to Apple:
https://stackoverflow.com/a/7893031/1456376
iframe example with the same problem:
https://stackoverflow.com/a/8275972/1456376
We have used the plugin below in our project, did you try this one out?
https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview
On iOS it uses hardware acceleration to render the scrolling. It is rather easy to use, all you have to do is to assign an additional class to your div.
We did have some issues on Android 2 with this plugin, to overcome those issues we changed the scrollMethod property in jquery.mobile.scrollview.js.
I hope it helps you solve your scrolling problem