Slide Panel taking a long time to open when page has a larger listview with Android #5636

Closed
Don12 opened this Issue Feb 13, 2013 · 19 comments

Projects

None yet

6 participants

@Don12
Don12 commented Feb 13, 2013

I have been testing the Panel widget delivered with jQuery Mobile 1.3.0 RC1. For the most part, the Panel works very nicely. However the widget does take longer to open when testing on an Android phone. My phone has Android os version 4.0.3.

For most pages in my mobile app, the panel opens 2 or 3 seconds after clicking the open button. This is kinda slow compared to even a first generation iPad. However, I have a page that has a listview with about a 180 list items that really shows a problem with a delay of 6 to 27 seconds.

This problem of delay does not present itself with an iOS app.

Thanks,

Don

@jaspermdegroot
Member

@Don12

Please provide a test page. See the contributing guidelines for instructions and our JS Bin template.

Are you talking about a PhoneGap/Cordova app running in Android WebView? What device did you test on?

@Don12
Don12 commented Feb 14, 2013

I knew you would reply about the test page. I will try to come up with something but not sure if it works the same through a web app as it does through a native app. In the past I had to turn on hardware acceleration in the android manifest to get decent speed results using parts of jqm. Unfortunately if it is only native app related, a test page will not work to show the issue I am having. I will see if can come up with a jsfiddle to see if I experience the same delays. Do you have a link to a jsfiddle that has jqm 1.3.0 rc1 to use?

@jaspermdegroot
Member

@Don12

Please read the contributing guidelines. Always test with latest code, not latest release. There is a link to a JS Bin template and instructions. You can put your markup in there. Then we will load that JS Bin in an app that will run the page in Android webview instead of the browser. No, we don't have JSFiddle template.

@Don12
Don12 commented Feb 14, 2013

Thanks for your reply. Sorry for being confused about JS Bin being JS Fiddle. In the future, I will make sure to have a test page.

I have provided a test page at http://jsbin.com/onibuc/232. To keep as close as possible for testing, I made the links point to # but still left the url string within the link.

Testing with the browser does show a little delay of a few seconds. Testing in a webview, using a simple mobile app and the same html, does have varying time from 4 to 15 seconds for the panel to open.

@arschmitz
Member

@Don12 sadly a longer delay is to be expected in a webview tests have shown that JS execution in webviews is up to 50% slower then in the native browser! 15 seconds is a bit long of a delay for sure though

@jaspermdegroot
Member

@Don12

I just tested that page in webview and didn't notice such a long delay. It's a bit slower than the browser but the delay I see is certainly not 4-15 secs. A small can be expected as @arschmitz already mentioned.
Could it be there is something else in play? I see data-cache-m-app="true" for example.

@Don12
Don12 commented Feb 14, 2013

I can see the possibility of up to 50% slower but the difference between a couple seconds to almost 20 seconds is a lot. When there is a larger listview, this is a problem.

The actual moving of the page does fine once panelbeforeopen is triggered.

I am not sure of what is going on between clicking the open panel link and panelbeforeopen is triggered, but this is where the delay occurs.

I activate the page loading image on panelbeforeopen and deactivate it on panelopen.

I have also tried activating loading on the link click event for the panel open link. I get the same delays.

@Don12
Don12 commented Feb 14, 2013

Not every time does the open panel take a long time to open. With my test app, using the webview, there were varying results from 4 to 15 seconds. It seems to be random as to the amount of time and when it occurs. It took about 10 times opening and closing the panel to catch the 15 second delay. Before and after that the times varied again.

Is there away to show a page loading message as soon as the open panel link is clicked? So far I get the same delay trying to use any possible event.

@Don12
Don12 commented Feb 15, 2013

If this helps any, I am using the latest rhomobile/rhodes gem to run the app for the Android webview.

@Don12
Don12 commented Feb 16, 2013

I have been debugging with the Panel widget from the latest source code for the widget from the master branch.

It appears the delay is tied to the panel css somehow.

If I remove the following the response times for the panelopen event to improve to less than a couple seconds but with not good results obviously:

/* animated: panel left open (for reveal and push) */
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
left: 0;
right: 0;
-webkit-transform: translate3d(17em,0,0);
-moz-transform: translate3d(17em,0,0);
transform: translate3d(17em,0,0);
}

If I add data-animate="false" to the panel, I get consistent time results around 4 to 5 seconds which is certainly better than possibly over 15 seconds. I am thinking the delay is due to css transform and not javascript for the webview with Android devices.

I had previously developed a jQuery widget to do something very close to like your widget, but it was not as smooth as your panel widget. I used animation with javascript instead of css and it was fast but showed a choppy animation with older iOS and Android devices.

Your widget has given me some ideas. Keep up the good work!

Don

@Don12
Don12 commented Feb 16, 2013

Somehow I think if you can fix the webkit transform problem for Android webview, you would solve a lot of slow issues for jqm on Android native apps especially with listviews.

@Don12
Don12 commented Feb 16, 2013

I am almost 100% certain that it is the css that is the problem in combination with the following line with the Panel for the webview:

self.element.add( self._wrapper ).on( self._transitionEndEvents, complete );

This line is waiting for the parts that open the panel vis css to complete. Unfortunately even with the hardware acceleration set to true with the android manifest, the css transformation events are somehow broken with javascript events.

@berthojoris

Yes, I am experiencing the same thing in doing the show panel. There is a delay as has been said. I tried it through the browser on Android OS 4.1

@Don12
Don12 commented Feb 19, 2013

After working with my custom panel widget, I am close to having something that works really well within the Android webview using parts of the beta Panel widget. Initially I was getting bad response times using translate3d the same as with the beta panel widget.

Testing seems to point to the following css not being hardware accelerated:

-webkit-transition: -webkit-transform 350ms ease;

I also use the above css with my version of the Panel widget.

Digging a little further I was able to use addClass via javascript with my widget to any areas animated to make the widget perform faster:

.ui-navmenu-content-transform {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

Unfortunately I am unable to figure out how to fix the beta Panel widget the same but feel there is a problem with hardware acceleration somehow.

Once I finish the fine details and bugs, I will try post a JS Bin with my version of the Panel. It takes about a second to do open a panel with Android webview.

@jaspermdegroot
Member

@Don12

My commit de18420 addresses this issue as well. Going to close as fixed, but please comment if you don't see any improvement.

@Don12
Don12 commented Apr 1, 2013

@uGoMobi

Unfortunately, the test Android app I created for this issue is still showing the same performance lag with ICS os. The app is pointing to the latest jQuery Mobile js and css like test page presented with this issue. Using hardware acceleration in the Android manifest made no difference for the varying panel show times( 3 to 10 seconds today). It did affect any smooth transitions. (Without acceleration = no animation for the panel.)

@jaspermdegroot
Member

@Don12

We are going to a lot of widgets refactoring for 1.4 that should improve perfomance. Hopefully this will reduce the delay you are noticing on Android webview as well.

@RdlP
RdlP commented Jan 14, 2014

As I mentioned in #6934 In jQuery Mobile 1.4 the problem still appears and it does't solve yet.

@dezudas
dezudas commented Sep 13, 2015

I am still having the same issue, even my panel takes about 10-20sec to open

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment