ionic sidemenu on mobile browser not working smoot

Question

I am developing mobile web app using ionic sidemenu, but it is not as smooth as it should be. When I open sidemenu using slide left/right, I am getting less than 30 FPS as shown in figure.



How can I improve the performance?
Reaching 60 FPS would be great!

Answer 1

AppGyver's Steroids tooling also provides you with access to Crosswalk on Android. You can run it in your Ionic project directly without modifying any files.

Also, Supersonic's sidemenu/drawer is fully native, so if you're up for migrating, it'll run way faster. :)

(Disclaimer: I'm a programmer for AppGyver.)

Answer 2

My advice is to use Crosswalk instead of the Cordova as the webview for the app.

While both share the same end goal, they are different:

• Cordova, from the Apache Foundation, uses the regular (pre-lollipop) Android webview, which is based on Android's stock browser since its inception.
• The Crosswalk Project, created on the Intel Open Source Technology Center, is different. It wraps your app with Chromium, the open-source base code that gave birth to Google Chrome, which brings numerous performance enhancements: css3 transitions, animations, 3d transformations, html5 support, remote debugging and much better javascript support and performance.

At the time of writing, the Ionic team is already working on a beta version (1.3.0-beta1) that uses Crosswalk instead of Cordova. Not really stable just yet, but a huge promise.

In any case, you can use Crosswalk today, by manually copying your Ionic project's 'www' folder content to the project folder inside Crosswalk folder and run it. You'll need to setup some manifest files previously, so read the docs.

In any case, it's not hard at all to try, and I'll recommend it everyday for all projects pre-Lollipop. If you're targeting Lollipop/Android 5 versions, you don't need it, because the default Webview in these versions is already Chrome-based.

Hope it helps.