Android Device: Animation Performance, md-icon issue on Chrome #1177

Omkaraaa · 2015-01-13T07:19:52Z

I am building Android application using Angularjs, Angular material and Cordova.
Can somebody help on below issues. Can someone suggest tips/tricks to improve/fix below points?

Issue ~1:
Animations are very very slow on android device. Mainly ripple effects/animations given to md-button are slow. I have tried disabling hardwareAcceleration for cordova still it does not works.
See below Html .
Code:

Issue ~2:
Multiple click on md-button makes application not responding. Does not give intuition of which button is active or focus.

Issue ~3:
I observed that with Crome browser on Laptop, there are few problems for demo site also (https://material.angularjs.org), md-button icons are not visible. However same works in firefox. May be md-icon has changed in new build?
See below image:

gngeorgiev · 2015-01-14T12:03:36Z

An option to have only one ripple effect at a time would be great for mobile devices.

Omkaraaa · 2015-01-15T05:15:21Z

@gngeorgiev : that is brilliant idea. Are you facing same problem? Have you implemented it?

gngeorgiev · 2015-01-15T08:13:36Z

@Omkaraaa No, not yet, but surely I will give it a go if this issue has no progress since multiple ripple effects crash my application with Crosswalk on Android 5.0

gngeorgiev · 2015-01-15T19:40:56Z

@Omkaraaa @ThomasBurleson You can take a look at #1204 and see if it will help in this scenario.

nafeezabrar · 2015-02-12T12:36:21Z

I just visited demo site from a cordova application. Angular-material's animation is really slow in crodva webclient.

atentis · 2015-03-09T03:34:23Z

I agree with the op. I am using buttons on a side nav and it gets ugly when you combine (button ripple + close sidenav + load view w/data).

I look forward to future improvements

alexhuot1 · 2015-03-22T01:17:15Z

I didn't want to open an other issue, because I guess it's the same problem. The sidenav animation is very slow and the toggle button also. I use phonegap/cordova.

FYI: After mutiple toggle of the sidenav, the perfomance kind of increase and become usable.

Thanks!

uriva · 2015-05-14T23:04:05Z

+1

iyoukeyyewei · 2015-06-05T07:27:23Z

yes. the button and sidenav are too slow on mobile. I cannot use material angularjs on mobile until the performance improved.

uriva · 2015-06-05T09:51:34Z

For me the slowness appears on desktop as well.

ThomasBurleson · 2015-06-05T15:08:08Z

@robertmesserle - do you have time to investigate this today?

robertmesserle · 2015-06-05T15:16:44Z

@ThomasBurleson I'm not in the office and don't have access to an Android device today, so probably not.

simongcc · 2015-06-22T04:01:41Z

Tested with 0.9.4
+1 ripple is extremely slow in custom Android Tablet with the following configuration for reference:
Android 4.2.2
CPU: ARMv7 1.6GHz (tested in full speed with latest Chrome)
Resolution: 1366 x 720

+1 ripple is fairly slow in a local system that is actually a desktop, not sure if it is related to GPU or CPU, the configuration for reference:
Windows 7, 32Bit
Display: Intel Q965/Q963 Express Chipset Family
CPU: Intel E5700 Dual Pentium 3.00G
Resolution: 1024 x 768

In these machines, the ripple respond differently, normally in a Desktop environment, one click will trigger one ripple is expected.

sometimes one click/touch trigger one ripple (true for Intel i5 Desktop with builtin graphic card, Android with App running in Webview)
sometimes one click/touch will trigger the ripple but the ripple will not be staying if it is not long pressing(click/touch) (true for above Desktop, Android with Chrome)
when click consecutively, the button color of the background is stuck in dark ripple color without restoration (true for any Android with webview, not tested in desktop because the touch screen respond too slow in our case, might be hardware related)

MilosStanic · 2015-06-23T10:57:29Z

I confirm very slow sidenav and button animation on Android phonegap/cordova.
I guess this needs to be fixed, since Material Design is "mobile first".

kevindstanley1988 · 2015-06-26T11:55:20Z

Device: Samsung Galaxy s6
Angular version: 1.4.1
Material version 0.10

I have a samsung galaxy s6 android, which should be far more than enough power for this framework. I see lagging issues on the sidenav opening and scrolling. I also see lagging issues when i click buttons, for instance I have a menu with 3 menu buttons, I click my logout button and the ripple is slow and then pauses at the end of the animation for about 2 seconds before executing the ng-click. Desktop works great for me, but I have a gaming rig so it is above an average business's computer.

uriva · 2015-06-26T16:02:56Z

I'm experiencing similar things on chrome with ubuntu

On Fri, Jun 26, 2015, 15:02 kevindstanley1988 notifications@github.com
wrote:

Device: Samsung Galaxy s6
Angular version: 1.4.1
Material version 0.10

I have a samsung galaxy s6 android, which should be far more than enough
power for this framework. I see lagging issues on the sidenav opening and
scrolling. I also see lagging issues when i click buttons, for instance I
have a menu with 3 menu buttons, I click my logout button and the ripple is
slow and then pauses at the end of the animation for about 2 seconds before
executing the ng-click. Desktop works great for me, but I have a gaming rig
so it is above an average business's computer.

—
Reply to this email directly or view it on GitHub
#1177 (comment).

cleever · 2015-06-26T17:42:45Z

The same issues.

makersio · 2015-06-27T17:37:14Z

This is really a problem.

From my point of view good performance in a wrapper like Cordova is essential. Otherwise the whole mobile platform is out of reach when using this framework.

Really like it though so hoping this issue will get attention.

Good luck.

sckoh · 2015-06-28T09:59:11Z

same issue

alexcriss · 2015-08-20T05:17:31Z

I confirm seeing rather slow animations when the sidenav opens or closes and when clicking links on the sidenav on the demo site.

Device is a Huawei Honor 6.

gpopovic · 2015-08-21T19:47:19Z

I can confirm the same slow animations (sidenav is awfully slow, and changing route on button click is always ugly :/)

ryanpager · 2015-08-26T22:31:01Z

Hey guys, try this application out and see if its running sluggish for you -- id be interested in feedback since I havent seen any issues on a plethora of devices.

https://play.google.com/store/apps/details?id=com.traxohybrid.traxo

atentis · 2015-08-29T23:23:41Z

@ryanpager I cannot login after creating an account. Got some token error. Send me a pm if you would like me to take a look. I have a pretty old cpu on my phone (2013 moto x) so it would be nice to test.

-Adam

ryanpager · 2015-08-30T20:37:12Z

@atentis Hey -- good catch, I just fixed the stupid sign up (it was still pointing to our staging environment). Re-sign up in a couple hours when the update comes down (version 2.0.2) and youll be good to go. Sorry about that!

nitin7dc · 2016-01-15T12:12:47Z

+1 animations are too bad on android.

jwuliger · 2016-01-25T11:38:11Z

I am having the same issues. I have an Ionic/Cordova app I am developing. I am using a Samsung Galaxy S6 Edge as my high-end test device. Most of all the components have butter smooth animations. The one that kills the performance of the app are the tab content transition animations. They really struggle to move to the next tab. This is with me just copying and pasting the demo right into my code. On the other hand something like the FAB Toolbar, or the bottom-sheet work really well. I am using the latest of everything since I am still developing (Including ngMaterial 1.0.3). I know the team is probably hard at work on Angular 2/Ionic 2. I guess what I am looking for is a good way to override the transition animations, or maybe a work-around? I appreciate any feedback! All the best.

ghost · 2016-02-02T12:35:44Z

Not just on Android. It's also laggy on Chrome (Mac).

redyyu · 2016-04-16T16:59:11Z

I am using Chrome on Android 6, Samsung Galaxy S7. and Moto G.
The sidenav animation has same issue. the material angular is 1.0.7

I have another material ng project using 0.9.8, looks much better than 1.0.7.

dudafreitasrj · 2016-05-05T01:52:19Z

First sorry for my English.

The problem is that the "angular animate" does not work well when we have animation in animation.

EX:

<Div class = "one">
    <Div class = "two"> </ div>
<Div>

If we put animation for the class "one" and "two" will be slow, but if we do so:

<Div class = "one"> </ div>
<Div class = "two"> </ div>

The animation will be fast. I did this test several times and in all in the first case was slow and the second was fast.

The SlideNav does just that is so slow.

nitin7dc · 2016-05-07T05:50:52Z

For md-sidenav adding css hardware acceleration to all md-sidenav classes solves the issue.

Add following code to your custom css and place it after angular-material.css

md-sidenav.md-closed-add, md-sidenav.md-closed-remove {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -moz-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;

  -moz-transform: translateZ(0) translateX(0) !important;
  -ms-transform: translateZ(0) translateX(0) !important;
  -o-transform: translateZ(0) translateX(0) !important;
  -webkit-transform: translateZ(0) translateX(0) !important;
  transform: translateZ(0) translateX(0) !important;

  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  transition: 0.2s ease-in all !important; }

md-sidenav.md-closed-add.md-closed-add-active, md-sidenav.md-closed-remove.md-closed-remove-active {
  -moz-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;

  -moz-transform: translateZ(0) translateX(0) !important;
  -ms-transform: translateZ(0) translateX(0) !important;
  -o-transform: translateZ(0) translateX(0) !important;
  -webkit-transform: translateZ(0) translateX(0) !important;
  transform: translateZ(0) translateX(0) !important;

  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.md-sidenav-left, md-sidenav {
  left: 0;
  top: 0;
  -moz-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;

  -moz-transform: translateZ(0) translateX(0) !important;
  -ms-transform: translateZ(0) translateX(0) !important;
  -o-transform: translateZ(0) translateX(0) !important;
  -webkit-transform: translateZ(0) translateX(0) !important;
  transform: translateZ(0) translateX(0) !important;

  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

.md-sidenav-left.md-closed, md-sidenav.md-closed {
  -moz-transform: translateX(-100%)!important;
  -ms-transform: translateX(-100%)!important;
  -o-transform: translateX(-100%)!important;
  -webkit-transform: translateX(-100%)!important;
  transform: translateX(-100%)!important;

  -moz-transform: translateZ(0) translateX(-100%)!important;
  -ms-transform: translateZ(0) translateX(-100%)!important;
  -o-transform: translateZ(0) translateX(-100%)!important;
  -webkit-transform: translateZ(0) translateX(-100%)!important;
  transform: translateZ(0) translateX(-100%)!important;

  -moz-transform: translate3d(-100%, 0, 0)!important;
  -ms-transform: translate3d(-100%, 0, 0)!important;
  -o-transform: translate3d(-100%, 0, 0)!important;
  -webkit-transform: translate3d(-100%, 0, 0)!important;
  transform: translate3d(-100%, 0, 0)!important;
}

md-sidenav.md-locked-open-add, md-sidenav.md-locked-open-remove {
  -moz-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;

  -moz-transform: translateZ(0) translateX(0) !important;
  -ms-transform: translateZ(0) translateX(0) !important;
  -o-transform: translateZ(0) translateX(0) !important;
  -webkit-transform: translateZ(0) translateX(0) !important;
  transform: translateZ(0) translateX(0) !important;

  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

md-sidenav.md-locked-open, md-sidenav.md-locked-open.md-closed, md-sidenav.md-locked-open.md-closed.md-sidenav-left, md-sidenav.md-locked-open.md-closed, md-sidenav.md-locked-open.md-closed.md-sidenav-right, md-sidenav.md-locked-open-remove.md-closed {
  -moz-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;

  -moz-transform: translateZ(0) translateX(0) !important;
  -ms-transform: translateZ(0) translateX(0) !important;
  -o-transform: translateZ(0) translateX(0) !important;
  -webkit-transform: translateZ(0) translateX(0) !important;
  transform: translateZ(0) translateX(0) !important;

  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}
md-sidenav.md-closed.md-locked-open-add {
  -moz-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;

  -moz-transform: translateZ(0) translateX(0) !important;
  -ms-transform: translateZ(0) translateX(0) !important;
  -o-transform: translateZ(0) translateX(0) !important;
  -webkit-transform: translateZ(0) translateX(0) !important;
  transform: translateZ(0) translateX(0) !important;

  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}
md-sidenav.md-closed.md-locked-open-add-active {
  -moz-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;

  -moz-transform: translateZ(0) translateX(0) !important;
  -ms-transform: translateZ(0) translateX(0) !important;
  -o-transform: translateZ(0) translateX(0) !important;
  -webkit-transform: translateZ(0) translateX(0) !important;
  transform: translateZ(0) translateX(0) !important;

  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

.md-sidenav-backdrop.md-locked-open {
  display: none;
  -moz-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;

  -moz-transform: translateZ(0) translateX(0) !important;
  -ms-transform: translateZ(0) translateX(0) !important;
  -o-transform: translateZ(0) translateX(0) !important;
  -webkit-transform: translateZ(0) translateX(0) !important;
  transform: translateZ(0) translateX(0) !important;

  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

.md-sidenav-left, md-sidenav {
  -moz-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;

  -moz-transform: translateZ(0) translateX(0) !important;
  -ms-transform: translateZ(0) translateX(0) !important;
  -o-transform: translateZ(0) translateX(0) !important;
  -webkit-transform: translateZ(0) translateX(0) !important;
  transform: translateZ(0) translateX(0) !important;

  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

.md-sidenav-left.md-closed, md-sidenav.md-closed {
  -moz-transform: translateX(-100%)!important;
  -ms-transform: translateX(-100%)!important;
  -o-transform: translateX(-100%)!important;
  -webkit-transform: translateX(-100%)!important;
  transform: translateX(-100%)!important;

  -moz-transform: translateZ(0) translateX(-100%)!important;
  -ms-transform: translateZ(0) translateX(-100%)!important;
  -o-transform: translateZ(0) translateX(-100%)!important;
  -webkit-transform: translateZ(0) translateX(-100%)!important;
  transform: translateZ(0) translateX(-100%)!important;

  -moz-transform: translate3d(-100%, 0, 0)!important;
  -ms-transform: translate3d(-100%, 0, 0)!important;
  -o-transform: translate3d(-100%, 0, 0)!important;
  -webkit-transform: translate3d(-100%, 0, 0)!important;
  transform: translate3d(-100%, 0, 0)!important;
}

augiegardner · 2016-06-28T07:24:52Z

Why is this closed?

The DEMO site has terribly slow ink ripples for every button when viewed from a brand new galaxy s6 edge. They're basically non existent.

Can anyone tell me why it's closed? Did I miss a note of a fix?

ryanpager · 2016-06-28T12:56:11Z

Any non-critical issues I believe were triaged so that they can focus on angular material 2.

foaudkajj · 2016-08-27T07:13:27Z

+1

SlavaSlimmy · 2016-11-23T09:40:51Z

+1

ThomasBurleson modified the milestone: Backlog Jan 15, 2015

gngeorgiev mentioned this issue Jan 15, 2015

Added max-ripple attribute support to limit the maximum amount of ripples at a time #1204

Closed

ThomasBurleson added the type: performance This issue is related to performance label May 28, 2015

ThomasBurleson modified the milestones: 0.10.0, Backlog Jun 5, 2015

ThomasBurleson assigned robertmesserle Jun 5, 2015

robertmesserle modified the milestones: 0.10.0, Backlog Jun 10, 2015

robertmesserle modified the milestones: post-1.0 , Backlog Aug 4, 2015

ThomasBurleson added the browser: Android label Aug 30, 2015

ThomasBurleson modified the milestones: post-1.0 , Backlog Jan 5, 2016

ThomasBurleson unassigned robertmesserle Apr 4, 2016

ThomasBurleson modified the milestones: Backlog, Deprecated Apr 20, 2016

Splaktar changed the title ~~Android Device : Animation Performance, md-icon issue on crome~~ Android Device: Animation Performance, md-icon issue on Chrome Apr 27, 2016

ThomasBurleson closed this as completed Apr 28, 2016

Splaktar added the - Lots of Comments label Mar 3, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Android Device: Animation Performance, md-icon issue on Chrome #1177

Android Device: Animation Performance, md-icon issue on Chrome #1177

Omkaraaa commented Jan 13, 2015

gngeorgiev commented Jan 14, 2015

Omkaraaa commented Jan 15, 2015

gngeorgiev commented Jan 15, 2015

gngeorgiev commented Jan 15, 2015

nafeezabrar commented Feb 12, 2015

atentis commented Mar 9, 2015

alexhuot1 commented Mar 22, 2015

uriva commented May 14, 2015

iyoukeyyewei commented Jun 5, 2015

uriva commented Jun 5, 2015

ThomasBurleson commented Jun 5, 2015

robertmesserle commented Jun 5, 2015

simongcc commented Jun 22, 2015

MilosStanic commented Jun 23, 2015

kevindstanley1988 commented Jun 26, 2015

uriva commented Jun 26, 2015

cleever commented Jun 26, 2015

makersio commented Jun 27, 2015

sckoh commented Jun 28, 2015

alexcriss commented Aug 20, 2015

gpopovic commented Aug 21, 2015

ryanpager commented Aug 26, 2015

atentis commented Aug 29, 2015

ryanpager commented Aug 30, 2015

nitin7dc commented Jan 15, 2016

jwuliger commented Jan 25, 2016

ghost commented Feb 2, 2016

redyyu commented Apr 16, 2016

dudafreitasrj commented May 5, 2016

nitin7dc commented May 7, 2016

augiegardner commented Jun 28, 2016

ryanpager commented Jun 28, 2016

foaudkajj commented Aug 27, 2016

SlavaSlimmy commented Nov 23, 2016