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 { ... }
}
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.
This is not a question about JQM panels scrolling independently of the page, though that is an issue I've had trouble with and almost overcome, this is about making the panel scroll smoothly and ignore the device browser's edge event (or whatever the correct term is, I'll explain below).
Basically, I'm trying to replicate the menu on Google's mobile site, which naturally isn't using JQM like us common folk. I've got it pretty close, but the scrolling animation is very rigid. I need it be momentum-based rather than fixed to your finger.
Also, when you reach the top or bottom of the menu, it's considered the extremes of the document so the browser moves the whole document up or down to indicate the edge of the page. Instead, the page should never move while the panel is open and the menu should take on this behaviour within the panel.
Since I've set the panel height to 100%, this forces the address bar on iOS Safari to come down when the menu is open. This seems to be exactly what happens on Google, but if there's a way around this I'd love to hear it.
Finally, one downside of the way I've emulated independent scrolling is to just set the content wrap as fixed when the panel is open. However, this means the page always scrolls to the top when the panel opens. Any alternatives for this would be appreciated. I suppose I could just set the page top as scrollTop or something.
To summarise:
Panel menu needs to scroll smoothly (momentum rather than direct touch)
Elastic edge on menu rather than window
iOS Safari address bar interfering with height
Page fixed at top when panel open
If any of my descriptions don't make sense, just visit google.com on your phone and check out their menu.
ScrollFix seems to have solved all my issues.
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 notice that on sites such as http://twitter.com and http://www.linkedin.com, when opened in an Ipad using safari, the page's width is locked to the window so even if you try to scroll horizontally it will not budge, whereas on my site the frame will move, revealing a grey background.
Does anyone know how the pages listed above do this.
I am using the:
<meta name="viewport" content="width=1024, initial-scale=1.0, maximum-scale=2.0">
as the way to control some properties but have yet to discover the way to lock/prevent the page from being able to move from left to right. vertical scrolling is perfect ofcourse.
Just to clarify, the page doesnt have a horiz scroll bar as it is fixed to 1024px and is centered, never-the-less, when you use your finger and move it from left to right or vice versa it will move the entire window and show grey behind it. It will be great to find out how pages stop that from happening.
Thanks guys and I appreciate it, once again this is hard to find on the tinterwebs and should come in handy for others who want to do the same. :D
//Giles
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.)