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:
-
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.
-
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?
-
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!