Img scroll performance

ionic-v1
1

Hi all,

I’ve got some performance issues with images in my scroll on iphone 4. I’ve been reading up trying not to post but still have a few questions.

I have one img per item and one repeating item in my ion-content. With only about 1-15 items max really.

  1. Image scaling seems like it can be a big issue but I’m not sure if the degree of scaling matters. My images are 200x200 and i’m scaling to 85x85. Is that a big issue? Requires a bit of work for me to be storing my images at exact sizes for the various sizes I need but if this alone is the likely issue then I will do it.

  2. My images have a radius which I really don’t want to remove for design reasons. Is this major or minor? No shadows.

  3. My images are using src but should I change to background-img?

  4. I am using android native scrolling with ng-repeat but I guess I could have a ng-repeat and a collection-repeat with ng-if based on operating system? (Seems like a bad idea)

pull to refresh is also fairly bad on iphone 4 (Although I have already removed it from the above page I am talking about)

2

Some initial testing shows that the scaling isn’t the issue, but border-radius is causing issues. I removed border radius from $item-avatar-border-radius and have a much smoother scroll in iphone 4. Really want a round image so will have to experiment to see if there are any work arounds.