Slider poor performance

[ghost]

When you drag a flip switch or a slider it goes very slowly. And if, for example, you have a flip switch and you drag it fast. If doesn't change it state.

Tested with Safari iOS 5 iPod 4G at: http://jquerymobile.com/test/docs/forms/forms-all.html

Sorry about my poor English but I'm from Spain. If you don't understand what I'm trying to say, please, let me know and I'll try to explain it better.

[juanghurtado]

I'm having this issue too. Here you can see a video, (tested on iPhone 4): http://dl.dropbox.com/u/682947/IMG_0815.MOV

It's under a PhoneGap 1.5 app with jQuery Mobile 1.1.0.

[juanghurtado]

This CSS seems to fix the problem (at least for input switches):

a.ui-slider-handle-snapping { -webkit-transition: none; -moz-transition: none; }

[toddparker]

Thanks for the video, that is helpful. I'm guessing that the transitions are bogging down this device so I think disabling transitions via a CSS override is a good option. We'll look into tweaking the transitions in the future.

[toddparker]

BTW - is this performance issue also reproducible in Safari or just in a webview in an app?

[ghost]

Both, in Safari and in a webview app (phonegap)

[zathrus-writer]

same thing here, both Android and iPhone applications do not react at all when I swipe the flip switch too quickly

tested on JQM Demo page with the flip switch, compared to the following link, JQM flip switch basically can't be used in a mobile web application running via PhoneGap for me

link to a replacement flip switch I might be forced to use: http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html

P.S.: reproduced within Phonegap as well as on Opera and built-in Android browser, plus Safari on iPhone, the CSS fix did not work for me when used on Flip Switch

[jaspermdegroot]

Issue #4804 (closed as duplicate) is about poor performance on IE8/9.

[norisuke3]

Hey, I wrote #4804, and I believe that #4804 is slightly different from this issue. #4804 is not a performance issue, but having a wrong behavior which is absolutely useless for a slider user. I don't mind it's aggregated to this issue, but please check and test it separately. thank you!!

[jaspermdegroot]

@norisuke3 - See my comment at #4804

[Greedo51]

Hi, Any news on this ticket ? It is impossible to use the slider on Android, so impossible to create my app using html5 and phonegap

[louisdoe]

same here, any news....it's a deal breaker for android...

[zathrus-writer]

I was forced to replace these broken controls by http://ios-checkboxes.awardwinningfjords.com/

These are now licensed for commercial purposes, however the guy is very friendly and even allowed our company to use them for free once we discovered there is no viable payment method we could use as a company to pay for the licence.

The overall performance is great, although it required a bit of hacking to prevent accidental vertical swipes to trigger the state change. But it's doable and also it's a nice replacement for the seemingly abandoned native controls of JQM.

[paulo62]

I'm also trying to use slider on Android with Phonegap .... incredibly slow.

Using the following versions: Phonegap 2.7.0 Android 4.1.2 Jquery Mobile 1.3.1 min (local copy) Jquery 2.0.1 min (local copy)

Testing on a Samsung Galaxy Express and simulator (both equally slow). When I test it using a web browser such as Safari it works fine.

[zathrus-writer]

ok guys, you just made me stop taking JQM seriously for some time to come...

you actually introduced dual handle range slider (http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/rangeslider.php) - which is slow even on my duo core laptop - without actually fixing the animation on the ON/OFF flip switch?

I'm sorry, but this is really approaching insanity, taken that this bug is already 1 year old

[louisdoe]

Hi Martin

What's then a Good alternative of JQM for an html app that i build with phonegap build?

Thanks Le 1 juin 2013 21:09, "Martin Ambrus" notifications@github.com a écrit :

ok guys, I just stopped taking JQM seriously for some time to come...

you actually introduced dual handle range slider ( http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/rangeslider.php)

• which is slow even on my duo core laptop - without actually fixing the animation on the ON/OFF flip switch?

I'm sorry, but this is really approaching insanity, taken that this bug is already 1 year old

— Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/4164#issuecomment-18795138 .

[zathrus-writer]

the only one I know that works is http://ios-checkboxes.awardwinningfjords.com/

[louisdoe]

Ok thanks Martin Le 2 juin 2013 23:49, "Martin Ambrus" notifications@github.com a écrit :

the only one I know that works is http://ios-checkboxes.awardwinningfjords.com/

— Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/4164#issuecomment-18814658 .

[arschmitz]

a quick note on this we are currently working on a new flip switch that will be a separate widget from slider. This will be part of 1.4 and the slider based flip switch will be depreciated. We will be looking at a new/refactored slider with better performance for 1.5.

[mikkokam]

Seems the slider and rangeslider both run OK on a laptop, but on any touch device both are sluggish within the browser and practically unusable with PhoneGap.

Virtualized touch events could be the place to look for the reasons of lag?

[zathrus-writer]

@mikkokam - from what I can see, this is mostly about CSS3 (or JS?) animations taking place when animating these sliders... the alternative I provided does not use any CSS3 animation, and that seems to solve the problem

[mikkokam]

1) Animations Agree - CSS3 animations might be one reason for performance problems.

2) Touch events There is also a possibility the reason for decent performance when using mouse vs. poor with touch has to do with the way the touch events are handled. Just like the 300 ms lag for click events makes me crazy when comparing the experience on laptop vs touch devices. (https://github.com/ftlabs/fastclick).

The CSS3 animations of the slider itself seem to be pretty simple: this.handle.css( "left", percent + "%" ); Just to test, I removed this and the rest of the slider CSS3 animations -- but it is still slow on Nexus 7: the numeric value of the slider follows the drag with a lag.

The dragging of the slider is handled by this: this._on( document, { "vmousemove": "_preventDocumentDrag" });

Which leads me to another guess:

3) Refresh The costly function called repeatedly is refresh: refresh: function( val, isfromControl, preventInputUpdate ) {

This is called very frequently while dragging the slider. Hundreads of updates to drag a slider from min to max. Might be a good place to optimize this?

Anyways - just had a few minutes to peek in and based on that my wild uneducated guess: either the touch events or the refresh itself might be the source of the poor performance?

---

The virtual events used:

// This plugin is an experiment for abstracting away the touch and mouse // events so that developers don't have to worry about which method of input // the device their document is loaded on supports. // // The idea here is to allow the developer to register listeners for the // basic mouse events, such as mousedown, mousemove, mouseup, and click, // and the plugin will take care of registering the correct listeners // behind the scenes to invoke the listener at the fastest possible time // for that device, while still retaining the order of event firing in // the traditional mouse environment, should multiple handlers be registered // on the same element for different events. // // The current version exposes the following virtual events to jQuery bind methods: // "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"

[tbosch]

Hi, as far as I can see the animations in jqm 1.3.1 for the flip switch directly modifies the left and width property of elements. This causes a lot of layouts, which is slow. The solution would be to use css animations / transitions when available or don't execute the animations when the browser does not support css animations / transitions, just like the page transitions degrade if needed.

@arschmitz Is there a preview of the new sliders and will they be using css animations / transitions?

Thanks, Tobias

[jaspermdegroot]

Changed the milestone to 1.5 for the new/refactored slider (and rangeslider). Removed "flip switch" from the title and will create a new ticket for that with milestone 1.4: new flip switch widget.

[arschmitz]

Im going to close this as wont fix the current widget will be replaced by a new one and we wont be putting any time into the current one to fix things like this.

[PanderMusubi]

Flip switch has been fixed but the slider and range slider are still not. Responsive is way too low on Android 5.1.1 with Firefox 43.0 for MJQ 1.4.5 demo page. Please reopen this issue or create one for fixing the sliders. http://demos.jquerymobile.com/1.4.5/rangeslider/