Hi - I’m facing a very weird issue with iOS that results in unacceptably slow performance (most notably: page transitions). I’ve narrowed the issue down, and I’m working around it as well, but I’m wondering if anyone has experienced anything similar.
Basically, I’m loading ~15 cards on my app’s main page. Each card has its own background-image that’s set in the card’s directive.
It looks something like this:
<div class="card" id="{{ card._id }}">
<div class="image" style="background-image:url('{{ card.cover_picture }}');">
<p ng-if="source_exists()" class="source">{{ card.source }}</p>
</div>
<div class="title">
<p class="main">{{ card.title }}</p>
<p class="sub">{{ card.found_message }}</p>
</div>
</div>
None of the images are more than 50kb. It doesn’t matter if I use ng-repeat or plain img elements or raw HTML. Going to and from this view is extremely slow on iOS (a delay of 500-2000ms seconds depending on how many cards are in the DOM).
Two things help (and maybe a third):
-
Removing pictures. Keeping the same exact HTML (whether it’s using
background-imageor<img src="">but removing the picture links. -
Positioning
div.cardrelatively (keeping picture links). They’re currently placed absolutely to take advantage of CSS transition animations. -
Impractical: haven’t tried this, but loading images with Data URI (as explained here) might also be a solution. Unfortunately, all my images are different and too large (dimensions) to even try that.
My UI setup prevents me from doing any of these. In the mean time, I’m making only the currently-displayed cards absolutely positioned, with the rest positioned relatively.
This still results in a slight delay, but it’s still usable. I think the UX, with this slight delay, should be capable of passing Apple’s scrutiny, but being the perfectionist I am, I want zero delay.
Has anyone encountered something like this?