Unresponsive/laggy UI on Android (and on Linux compared to the Ionic docs)


#1

Hi,

I’ve been playing with Ionic for about a week and have been testing my results on Linux (in Chrome via “ionic serve”) and on Android 4.4.4 (Nexus 4). And while all UI elements respond quite well in the browser under Linux, they don’t perform nearly as well on the phone.

Three things I have noticed:

  • Even in a regular browser, the color changes of buttons and icons upon clicking isn’t nearly as snappy as in the Ionic documentation, where everything is blazing fast.
  • On the phone, you don’t get to see the color changes at all if you tap shortly. Buttons will perform ng-click, href etc. actions but I don’t see any visual “button pressed” or “list item pressed” feedback. I only see them if I press buttons/items for a longer time (e.g. half a second).
  • Transitions between views take place only about a few hundred milliseconds after the tab was pressed.

I am fairly new to mobile development, so please excuse if my questions are stupid. Am I hitting the “300ms touch delay” issue that is mentioned across the web? If not, what could I be doing wrong? Or is this expected even?

Any help would be greatly appreciated. I am happy to provide more information if necessary.

Jannis


#2

My natural guess would be, you hit the 300ms delay (which is, by the way, not 300ms in all situations, some browsers (though not the general ones) use more then 300ms)

But, when we see the docs for ionic’s tap and click handling: http://ionicframework.com/docs/api/page/tap/

Out of the box, Ionic automatically removes the 300ms delay in order to make Ionic apps feel more “native” like.

So I guess it can’t be the 300ms delay.

I can’t say I noticed the behaviour you described. Could it be that you are just using an older phone and ionic is reverting to more fallback scenario then on your desktop?

Buttons don’t have a :hover state on mobile devices, so if you’re looking for that, you’re probably holding the button long enough to indicate that no user-action is intended and angular or ionic might be converting that to a :hover state, but even that is still speculation.


#3

@iwantwin: I’ll try with a more simple application to confirm. The browser on the phone is Chrome 36.0.1985.135, which updated just yesterday and is nearly as recent as my desktop Chrome (36.0.1985.143). I don’t think it’s falling back to anything.

I’m aware of :hover not being available touch devices. This is really a matter of tapping a button for a fraction of time, seeing no feedback but the button action still being executed, which is halfway ok (I mean, at least the button does it’s job and triggers) but due to the lack of feedback it makes you wonder: was my tapping recognized, will the button trigger?

And if I press a button longer and release it again, it takes another few hundred milliseconds until the button changes back from the “pressed” style to the regular “not pressed” style.


#4

Yeah, please check with the simple application :smile:

The first situation does sound like desired behaviour, at least there should be some way to determine wether the button was pushed or not. When I look at the docs ( http://ionicframework.com/docs/components/#buttons ) I see in source code there is an “activated” class that gets added and removed.

Your second situation makes me wonder if the activated class is only removed when the handler was already finished executing, resulting in massive delays if the function takes it’s time.

Just a hunch, but might be something you could look into as well.


#5

The default starter app (three tabs) behaves the same and I tried another app with just a regular button and that only shows visual pressed feedback if I touch it for a few hundred milliseconds. If it’s purely a matter of the “activated” class taking so long to be added to the button then that’s a pretty bad sign regarding the performance of anything more complex. Because if it’s DOM modifications being slow then that’ll only get worse the more complex the UI gets. But we’re still talking very basic UIs here so far, and they all show the problem already.

The single button example is slow even in my desktop browser. That makes me wonder - how come the demos in the Components and API docs are so fast?


#6

I doubt the DOM manipulation is slow. Instead, I think the moment the DOM manipulation is ordered is not where we would expect it.

Personally, I hadn’t noticed the problem. I’ll try tomorrow in more detail and find my bed for now. I’ll respond tomorrow after testing what my results are.

I feel your thought. Hopefully someone from @ionic could clarify things here.


#7

This is the most basic example I could come up with. The button doesn’t trigger and release nearly as quickly as in the Ionic docs (visually, that is, it would probably still action on ng-click quickly).

For comparison, here’s a link to the buttons in the Ionic docs:

Is it just me or can others reproduce this?


#8

Well, I’ve checked. The codepen you provided works as expected in android 4.4.2 on Chrome 36.0.1985.135, which is the same version u mentioned. No issues at all over here… I’m not able to reproduce it seems… :frowning:


#9

Unfortunately, the problem persists in various browsers, so I have decided it’s not just me. I’ll see if I can debug the JS that leads to .activated being added to buttons etc. to understand what makes it slow.


#10

I’m very curious as to what the problem is… Hopefully someone else could shine some light on this as well!


#11

Here are my findings (please correct if anything is wrong).

First of all, the examples in the docs on http://ionicframework.com don’t actually use Ionic. They cannot be compared 1:1 because they don’t involve the same JS and CSS.

After looking at the Ionic source, particularly ionic.bundle.js, the main culprits appear to be:

  • ionic.activator.start uses requestAnimationFrame (mouse) and setTimeout (touch, timeout set to 80ms) to add the activated class to elements. This adds a small delay to the visual transition from normal to activated when pressing e.g. button. This delay might be too long to see anything on mobile devices when tapping or clicking elements shortly or in quick succession.
  • ionic.activator.end uses a 200ms timeout for removing the activated class again. This means there is a 200ms visual delay before e.g. button styles go back to normal when releasing a button.
  • ionic.activator.end also clears the activation timeout created by ionic.activator.start (touch devices), meaning that if you press only shortly, it may prevent the activated class from being added to elements entirely. This may be the main reason for not seeing any visual feedback sometimes.

From my perspective, this is a problem. Can we do better? I’ve dropped the timeouts and requestAnimationFrame calls in an example app and now buttons and list items are very responsive with mice and touch on mobile devices. For smothing out the transitions I have added a CSS transition property to .button.activated. Now I wonder what benefit the animation frames and timeouts have here - there are good reasons behind using them here, I imagine?


#12

I’d just like to say that I’ve been experiencing these same issues with Ionic (currently on the latest version, but I started with it a couple months ago). I absolutely love the framework, but it’s sadly not near-native on Android in my personal experience.

I also notice a considerable performance difference between the button docs and the CodePen sample, exactly as @jannis pointed out. (Win7, Chrome 37.0.2, plenty of processor/RAM if that makes a difference)

In the latest Chrome on desktop, Ionic overall performs better than on Android, that’s for sure. But the Android (4.4) webview is laggy. I’m convinced FastClick is not working (neither through Ionic or added in separately), because it seems there is always a consistent delay in any sort of user interaction/touch. Animations and transitions are often choppy as well.

I’ve been continuing to use Ionic, because a) it really is my favorite hybrid/CSS/JS framework I’ve used yet (I’ve tried em all), and b) from everything I’ve read, these problems are Android-specific; iOS reportedly operates at near-native performance levels, though I have yet to test this out myself.

I’m really hoping the Android support catches up, but do we know for sure that this is specific to Ionic? Are there other mobile frameworks that operate at the expected performance levels on Android, or is this a common issue throughout all of them?

Just to reiterate: I love Ionic. I really want to use it on every project now. But can someone assure me the Android issues are solvable?


#13

Is it possible that loading Angular templates saved as files (instead of inline) causes a drop in performance on Android? Doesn’t seem like that would be the cause of every Android issue, but maybe it is for the occasionally laggy page transitions?


#14

I am having the same issue on a Nexus 5 (4.4.4), an iPad air (7.1.2) and even in the iOS simulator.

I have been searching for a solution to this, and have come across a few other people describing the same thing


This looks like it could be a solution, but I haven’t tested it yet.


#15

Yes! That last thread I linked to fixed it for me.


#16

Same thing here, Nexus 5 and no tap feedback on quick taps. It is a problem


#17

You are not alone. The problem exists and it is very easy to notice


#18

This seems related to Animations lag on android (smooth on iOS?)


#19

I’m having very similar issues.
I test on my Nexus (4.4.2) and most problematic one is the scrolling. Sometimes it doesn’t respond at all (does not scroll), though the clicks are better.

I checked my app size and it’s 22 MB, it seems large compared to what it’s currently doing. I haven’t got lots of graphics yet, and even when I tried removing the graphics they dont’ amount to much.
Compared with phonegap’s kitchensink that has all the plugins and stuff this is much slower. The kitchensink doesn’t fail in scrolling.

Any ideas anyone?

I also tried minifying stuff before I build it and it doesn’t help much on the file size (nor the responsiveness)

If I show this to my boss that will just confirm the belief that thou shalt built on native only.

:frowning:


#20

I’m using Ionic 1.0.1 and still getting the same lagging on clicking or scrolling on android kitkat (4.4.2 - Galaxy S4) using default webview (chrome 30).

EDIT> things are fluid enough with crosswalk 12, though.