I've found the:
-webkit-overflow-scrolling: touch;
css element to give us native scrolling on ios. This seems to work ok for me.
But is there a way to turn off the "overscroll" effect?
For example, when scroll position = zero, and you keep dragging downwards, the top of my content will move downwards revealing a little bit of white space above it. When you release your finger, the content snaps back upwards. Is there a way to disable just that portion of it?
Also I read from here:
http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/
that apple had introduced this with a bug related to rendering, and a hack fix of:
-webkit-transform: translate3d(0,0,0);
is supposed to fix it. Was that fixed with ios6?
This seems to help:
https://github.com/joelambert/ScrollFix
... ScrollFix works around this by manually offsetting the scrollTop value
to one away from the limit at either extreme, which causes the browser
to use rubber banding rather than passing the event up the DOM tree.
Have you tried the techniques in this blog post about turning off elastic scrolling? Specifically, for iOS it suggests the following JavaScript:
document.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
},
false
);
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 don't know if this is something that can be helped, but when I tap and hold on a web page in mobile safari, or in cordova/phonegap-made apps run in iOS, there is this pretty useless empty "tooltip" popping up close to the top of the viewport, and it only moves horizontally across the screen.
Here is a screenshot of what I'm talking about (that annoying thing circled in red that totally gives away that this is a cordova app)
My question being : is it possible to prevent this behavior, and how ? It seems to not be present on anchor <a> anchor elements but putting anchors all over the place seems like overkill for this.
And if anyone knows, just so I go to bed a little less stupid, what is this feature called and what is it for exactly ?
I already have the following css properties in my body
-webkit-user-select: none;
and
-webkit-touch-callout: none;
to prevent the text selection and the copy and save of images.
I've downloaded other phonegap-made apps from the App Store and they too have this feature, so maybe there's no fixing it.
Anyways, thanks for taking the time to read this.
It's a bug on the UIWebview
It's been fixed on cordova and will be available on next release, but you can use this plugin meanwhile
https://github.com/EddyVerbruggen/cordova-plugin-ios-longpress-fix
Must use the JSFiddle on iOS to see issue :)
Developing an iOS web app, and have multi panels which are translated -480px on click (by adding a class with JQuery).
When I use -webkit-transform: translate: (480px,0); on the first navigation button, everything is fine except the input[type=range] becomes unresponsive.
I originally had this: http://jsfiddle.net/b4ung/2/
And later I added -webkit-perspective: 1; to the body. This fixed on Safari but not on iOS: http://jsfiddle.net/RLywz/2/embedded/result/
Can someone please tell me how to get the range function to work on iOS, and why it doesn't register after the translation?
Just for further note, if I change the transform to "left: -480px" the range works, but then becomes blocky when animating.
Any light would be tops, as its quite annoying (and if its a bug can someone file it 'cause I'm not a developer)
Edited to make the problem more clear, and show updated JSFiddle
I had the same problem, and I was able to hack it by setting the panel's css property to translate(0,0) when it needs to have the range working.
In order to have the animation/position right, I wrapped the element with a div and set the x position as needed and shifted the panel's translate property when the range doesn't need to be active. Hope it works in your structure.
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
I am working with the iPad (mobile safari):
Question:
Does anyone know how to hide the scrollbars on iPad?
I have looked already looked into webkit scrollbar styling using ::-webkit-scrollbar... This does not work for the main windows scrollbars.
Scenario:
I have an repeating image inside of a div that is over 10,000px by 10,000px. I want the user to be able to swipe the screen to move around over this huge div, which is essentially one big image, WITHOUT the scrollbars showing up.
So I need the functionality of the scrollbars, I just need them to be hidden.
Suggestions?
Thanks for your help!
-slwd
You might be able to use the TouchScroll library: http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/
Otherwise, what I would do is set overflow: hidden on your div and then use JavaScript to implement the scrolling. This will require listening for touchstart, touchmove, and touchend events, and moving the x/y position of your image accordingly. If you need frictional slowing (similar to what's built into scrolling views on mobile Safari) you can implement that as well. Keep track of the dx/dy between touchmove events, use that as a starting velocity for when you receive a touchend, then use setInterval as a timer to apply the friction until some minimum threshold at which you stop the animation.
This is sort of a hack, but: Make your UIWebView about 10px taller and wider than the screen.
(Inspired by someone asking the opposite question.)