I'm using Select2 as dropdown with jQuery Mobile. Scrolling through the list works good on an Android browser. The list flows freely. But on On iOS devices, the scrolling isn't flowing freely. The scrolling halts immediately. Refer to this.
Help is required in fixing this.
try adding -webkit-overflow-scrolling: touch; to containing div.
Answered by: Omar
Related
My website flickers out of control when scrolling on iOS mobile. Have't run into any issues on Android at all.
https://s3-us-west-1.amazonaws.com/stage.coefficientlabs.com/index.html
I've read through some similar forums discussing
-webkit-overflow-scrolling: touch;
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
But none of my attempts seem to have worked. I think part of it is because I can't tell which specific element is causing the flicker. It just appears to me like the entire website is flickering.
I've used
-webkit-overflow-scrolling: touch;
in the past before, but now when I inspect the code, it says it has an invalid property value. Some others are experiencing the same thing; I think the feature got discontinued or something.
I just want simple, normal mobile scrolling that we're all used to expecting.
Thanks so much in advance!
EDIT
I've found out that once I click the "Click to get started" button, and close the popup, the flicker stops. This doesnt happen with any other buttons, just this one. I've been working on integrating this popup with the rest of the website, so it looks like this is the culprit.
Still dont have any strong leads to pursue...not sure why opening and closing this popup causes the website to respond properly.
EDIT 2
Okay so I removed one CSS sheet and now the scroll works. Trying to isolate what in this CSS file is causing this scrolling issue. Here is the link. Any idea whats going on here?
Okay turns out that the popup wrapper's css property "display: none" was interfering with some of the other css properties(?). I changed this to "display:block" and just coded another way to hide the popup wrapper with z-index. No more flicker!
The problem with my function is that when I scroll down, the clone of the element I want to drag is positioned under my mouse pointer, this only happens in FF, IE and Safari, Chrome works like it should.
I already tried all answers on this question :
jQuery draggable shows helper in wrong place after page scrolled
But without succes,
I use jQuery 1.8.3 & jQuery UI 1.10.3
hopefully anyone has any idea on how to fix this.
You can view a live version of my webpage here : http://www.solar-sell.eu/uw-pv-systeem/?gezin=true
The people are the draggable elements and the house is the drop area.
Thanks in advance!
It seems to me that the problem is a jQuery UI bug - http://bugs.jqueryui.com/ticket/9315
I created a horizontally scrollable container with sorting.
There are some requirements:
The bounding box is fixed width
Must scroll when overflowing, no wrapping
Here is the JSFiddle: http://jsfiddle.net/6vXG2/ (drag columns with pink header)
This works perfectly with: IE9, Opera, Safari
But not working with: Chrome, Firefox
In both Chrome and Firefox, the elements start jumping around. (Incidentally, the behavior on Firefox is different between Windows and OSX, using exactly the same version - 17.0.1)
When initially designing it using float:left, all browsers behaved correctly, but due to no wrapping requirement, I cannot use this.
Any ideas how to fix this? Or is this a jqueryui bug/issue?
Thanks
EDIT:
If I add border-collapse: collapse it behaves correctly again in Chrome, but breaks in Opera.
EDIT 2:
Found a 'weak' workaround going back to float:left: See http://jsfiddle.net/6vXG2/1/. Not ideal, but OK for now. Still open for suggestions.
I'm having an issue with KendoUI charts which started occurring on iOS 6 devices, which I have reproduced in Safari, Chrome and Mercury.
When a user performs a "taphold" action (touching the screen and keeping the finger pressed for about a second) over an element, the element is highlighted in blue and the "copy/select/select all" context menu is brought up, as shown in the following screenshot.
This seems to occur for any type of element so it is not necessarily a KendoUI issue, but in case anyone else has encountered this, I would like to know if it is possible to somehow disable this feature. I've tried using the jQuery .disableSelection() method, but to no avail.
The reason for needing to fix this is that my app has some functionality bound to the jQuery mobile "taphold" event when performed on a chart, and the selection of the chart or one of its elements, along with the context menu appearing, can be distracting and confusing for the user.
Thanks!
Try the css rule -webkit-user-select:
-webkit-user-select: none;
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