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.
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?
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?
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.
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.
@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
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.
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.
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.
If this helps any, I am using the latest rhomobile/rhodes gem to run the app for the Android webview.
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) */
Your widget has given me some ideas. Keep up the good work!
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.
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 );
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
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.
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.
My commit de18420 addresses this issue as well. Going to close as fixed, but please comment if you don't see any improvement.
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.)
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.
As I mentioned in #6934 In jQuery Mobile 1.4 the problem still appears and it does't solve yet.
I am still having the same issue, even my panel takes about 10-20sec to open