Slow page transitions on Android with hardware acceleration on


#1

I’m trying to run the ionic-angular-cordova-seed project on Android 4.3.1 with Cordova. One thing I’ve noticed is that page transitions (for example, clicking on a tab or a list item) are very slow.

I tried to disable hardware acceleration using:

super.appView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

… and it worked perfectly. But then scrolling, side menu sliding and more animations became extremely slow.

I’ve tried FastClick, it didn’t make any difference.

I found this CSS-based solution to the problem, but I’m not familiar enough with Ionic to apply it on it. Any ideas?

Note: I’m not using any animations for page transitions.


#2

Hmm, what model of phone are you using?


#3

Galaxy S3 with CyanogenMod


#4

Hello, I am having the same issue with the seed project (ionic-angular-cordova-seed).
Very slow transitions between view states. Also on Galaxy S3 with Cyanogenmod. So this might be a Cyanogenmod thing ?
update:
Just tried the same seed project on a galaxy tab 10.1 with the factory rom, same issues.


#5

@alon_gubkin @arenddeboer thanks for reporting this, we’re looking into it.


#6

Any update on this? I’m having a lot of trouble with Android transitions and scrolling etc.


#7

I managed to fix it by using cordova-android-chromeview.


#8

Hi guys

How do we know if we need to use this.
How do we know if the chromeview is being used instead of webview - is it a particular version of Android (or cHrome)

thanks


#9

@darrenahunter Right now, I know that cordova uses the native webview instead of the chromeview. Although I know they are trying to move to chromeview though in new version.


#10

In pre-KitKat Android versions, cordova uses the native android browser (which is the IE6 of the mobile web). In order to improve performance, you want to use cordova-android-chromeview which embeds Chrome inside your app and forces corodva to use it.

In KitKat, cordova uses the Chrome webview by default. In addition, the cordova-android-chromeview project crashes in KitKat.

So the solution is to create 2 apk versions: one for pre-KitKat, which uses cordova-android-chromeview, and one for KitKat, which is a normal cordova build.

In the Play Store you can actually upload these two apks and configure that the first apk will download automatically in pre-KitKat, while the second apk will download only on KitKat and future Android versions.

Even though this process is a bit tedious and adds some MB to one of your apks, I highly recommend everyone with an Android version to do it. It increases performance a lot and you don’t need to work on your JavaScript code.


#11

@alon_gubkin how did you set up cordova-android-chromeview to work with your cordova project? I am completely clueless as to what to do with the sources.


#12

@alon_gubkin, when you say

it adds some MB
can you please tell us how much?

#13

Apparently around 25MB


#14

This is a big issue with my app on Android. I have not yet tested on iOS.
Animations / transitions between views, modal show / hide and side menu slide are not at all smooth on android. List scrolling is also not smooth. I just have a list of 10 items.

Its my first experience with Ionic to build app. I was quite optimistic about Ionic and even wrote a blog post talking about its capabilities but looking at how it is performing on my Android 4.1.2 phone, I am disappointed :frowning:. I am planning to use it to build production level app for our new venture www.FindSmartly.com. Kindly help me to get ionic work smoothly on both Android and iOS.

If someone has found solution to improve transitions / animation on android, kindly share details.

JFYI, I am using latest ionic and cordova versions:
ionic: v1.1.9
cordova: 3.5.0-0.2.7

Gaurav


Ionic v0.9.17 + Phonegap on Samsung S4 / Glitchy Animations
#15

Use overflow-scroll="true" for the ion-content or give up with this container and just use <div> styled to fit 100% of the view with the overflow style set to true. An example list of mine (1000 items) that works smoot on all Androids I have (4.0.3, 4.0.4, 4.1.3):

<div class="my-content">
    <div class="my-list">
        <div class="my-item" ng-repeat="product in products">{{product.title}}</div>
    </div>
</div>

.my-content {
	width: 100%;
	height: 100%;
	margin-top: 94px; /* this is because of header and subheader which I use */
	overflow-y: scroll;
}

I’d prefer to use ion-content because of its superb additional features (infinite scroll, PTR, scrollbar) but it’s unusable currently even with the collection-repeat solution.

Let me know if this helps.


#16

Thanks for response, but your suggested solution is not making any difference. Not sure what the issue is. Few threads say its an issue of webview being used, so replace that with chromeview, but I have one observation, I earlier developed a prototype app with LungoJS + Cordova and in that case the transitions were smooth although tapping was bit delayed. Transitions with LungoJS were very smooth but its no where acceptable with Ionic. It seems that its an Ionic issue and not exactly webview thing OR I am missing something in Ionic to make transitions and animations smooth.

Any more pointers to try ?

Gaurav


#17

Yes, this is Ionic issue. The other frameworks perform better because they don’t do any specific things on the container they provide. Their containers are pretty the same as simple div with the overflow scroll. Ionics ion-content has a great sort of additional features, but not much optimized and cause lags all over an application, especially on Androids 4.x. If you cannot see any difference by removing the ion-content or ion-scroll and replacing with div, then you haven’t got rid of the transform3d style that is beeing updated all the time and over again. It’s easy to notice even on a desktop Chrome with elements tab in developers tools opened. By scrolling contents of a view and observing a container style (transform3d) in the elements tab which is updating during the scrolling, you can even make Chrome lags on quite a fast machine.


#18

Yes I used to face the same issue. If you actually open chrome dev tools and look at frames tab under timeline while you keep firing some events like scroll or basic transitions you can have a look at FPS and rendering time. FPS should be around 60FPS for glitch free animations and 16ms of processing time for each frame.

This is very hard to achieve. I mean in 16ms the browser should:

  1. Interpret JS; Yellow line
  2. Parse HTML and Read and Write network data; blue line
  3. Re-calculate Style Rules and DOM layout; Purple line
  4. Re-paint the updated layout; Green Line.

All these tasks should be achieved for every frame rendering and within 16ms for butter smooth animation.

So first, make sure you don’t have high obstructive JS in your code. Optimize it as much as possible. Use requestAnimationFrame to carry out animations and it adds more optimization.

Parsing minified HTML is easier. So make sure your production app contains minified HTML.

Use CSS3 animations if it does the job. Under Chrome Android, CSS animations run in parallel with frame rendering. So you need not worry about blocking issues. So whenever you can use CSS3 animations.

Don’t try to add heavy DOM manipulation work when UI events like scroll or transitions are being fired.

Remove most of the unwanted elements from the DOM. Use CSS3 animations whenever you can. Because CSS animations does not block frame rendering process. Keep it as simple as possible. Even with the Chrome Canary web-view, 1.4 GHz Quad Core Processor, Average GPU and about a gig of RAM apps will appear slow and glitchy if you don’t optimize it as much as possible.

For example, an app used to suffer terribly while scrolling inside a modal. Someone observed that, even when my modal was static and no events were being fired the scroll appeared glitchy. The culprit was an animated icon that was in the view behind the modal.

You get my point right?

But having said that, Ionic in my opinion is the best mobile UI framework.


#19

Eventually I am able to build app with smooth transitions using Ionic and Crosswalk to build it. I used Intel XDK to build my ionic app with crosswalk (chromview). Simply import the ionic’s www folder in XDK and then use its build “Crosswalk for Android” functionality under “Build” tab of XDK. Hope it helps other people too. The created APK is of around 17.8 M (smaller than expected).

Regards,
Gaurav


#20

thank you, XDK is really helpful!