Poor performance on Android due to CSS Drop Shadows

ionic-v1
1

I am seeing poor performance (such as when scrolling through a list of cards), interestingly, when I have a drop-shadow css applied to the card element. Specifically, this CSS:

-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 90px rgba(0, 0, 0, 0.12) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 90px rgba(0, 0, 0, 0.12) inset;
 box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 90px rgba(0, 0, 0, 0.12) inset;

The slow performance can be seen when scrolling through the list of cards, as well as for animations on the page (such as when the action sheet pulls up). If I remove the drop-shadow, scrolling is much faster.

I’m also seeing other performance issues on Android (and these have nothing to to do with the drop-shadow): Especially page transitions. The transition itself is slow. And then once the page has transitioned, the title text on the header bar is initially centered, and then it moves to the left where it needs to be. So each time the page transitions, the title oscillates to the center and back to where it needs to be on the left.

So, I have 3 questions:

  1. For the drop-shadow issue, is this a common issue? Is there anything I can do to get the same performance with the drop-shadows around? I’d really like to keep my drop-shadows to achieve my material design look.

  2. For the page transition issue, I read that using Crosswalk can improve performance on older versions of Android. I am on the Nexus 5 and have the latest version of Android, so would using Crosswalk still make a difference?

  3. It seems like updating to the latest ionic build could improve performance somewhat. How do I update the ionic version for an existing project?

Thank you!

2

  1. Drop shadows in general are big performance killers. Every time you scroll, you have to repaint that shadow and it is very taxing on the browser. This is true in mobile and desktop. The end goal is to base64 that drop shadow as a background image, so that way it will be a bit more performant.

  2. Crosswalk will pull chrome version 37 into your device, but since you are on android 5, you’ll have a self updating webview, so crosswalk won’t be necessary.

  3. If you built the app with the ionic cli, you should be able to run ionic lib update from the command line.

3

Thank you. So for the drop shadows, if I wanted a button to have a drop shadow what are my options? Could you please give an example oh how I could base64 it? If I used the components from Angular Material, would that help to improve performance may be?

4

After integrating ionic with Angular Material, it is super fast!

5

…and how did you do that?