Carousel Performance Portrait vs. Landscape + Orientation change Landscape very slow

[squarefan]

Hi@All,

I know the question comes up more often but I could not find a satisfactory answer in the forums and wanted to know if anybody can help me.

I am currently working on a pretty straightforward app. It contains 13 cards via the carousel which displays one main image ( currently about 80kb/image), 2 smaller images (about 20kb each) and 3 divs with a little text per card.

I already followed the Sencha touch performance guidelines minimizing listeners, layouts on each item etc., optimizing picture size but still running into jerkiness and performance problems; basically that the transition is not smooth but it hangs shortly before changing the card.

Here it where it gets interesting though:

1. If I load the page in portrait mode the performance is very good... no jerkiness, no hangs before cardswitch etc. When I flip the app now into Landscape (no listeneres currently on onOrientationChange) it the jerkiness starts. Flip back to Portrait and everything is fast again

BUT...

2. If I load the page starting in Landscape mode the jerkiness and hangs between the transition are there (like in point 1) BUT if I switch into Portrait mode the hangs between card transitions persit even though when I start the application Portrait it runs perfectly. Hmm...

Also, the orientation change from Portrait to Landscape is quite slow (takes always between 2-3 seconds) and doesn't resize all child elements properly from time to time; this behaviour is somewhat irratic.

Interestingly the transition between cards is always smooth going to the right from the 12 to the 13th slide (end to the right) and going then back to the left from the 2nd to the 1st slide which is kind of strange. Please that I tested this with both larger images (around 200KB/image), smaller images (around 80KB/image) and no images at all.

I can reproduce these issues in both the Mobile Safari or compiled with Phonegap.

So to summarize my questions:
1. Does anybody here has a pointer in how to improve the performance of the carousel in Landscape mode?
2. An explanation why there is a difference in performance when it is loaded first in Portrait or Landscape
3. Why transitions between the first and last slides are smooth no matter if I use pictures (small or big) or no pictures at all
4. Is there a best practice check/workaround to force the elements to properly resize on Orientationchange (maybe setting the width/height manually with 100%)?

I know that Sencha Touch 2 is much better in speed and layouting but being a Pre-Release and not feature complete I would like to avoid using it if thats possible.

Hope somebody can help me!!

cheers,
Alex

[mitchellsimoens]

This is odd as the DOM size isn't changed, just the width is wider but the height is smaller. DOM size is usually what the performance issues are, how many things are rendered at once.

[squarefan]

hi, thanks for your quick reply.

I am loading all the assets at once since I need to update some elements in there for translation purposes etc. and I thought it is not that much stuff anyway (have to think if I might am able to do that on the fly?). But I only display one image at a time.

If you want I could give you access to the page - but if possible I would send you the link via PM (don't want to post my personal dev server on the public forum). Would be interesting if you can reproduce it on your end.

cheers,
Alex

[squarefan]

Nobody else ran into these problems? Is there maybe some way to generally improve the speed of the carousel or the layout switch?

[bowie]

Hi,

I ran into the same problem.
When fresh open the carousel, in both portrait and landscape, card switching is smooth.
But once orientation change, the card switching transition becomes abnormal.
say when switch from 1st card to 2nd, can see 5th card flash before 2nd shown.

Appreciate if anyone can help or share your findings on this.

I am testing on iOS, by the way.

Thanks.

[bowie]

Hi squarefan,

Did you find any workaround for this problem at last?
I tried some but no luck. Appreciate if you can share your solution.
Thanks.

Bowie

[squarefan]

@bowie

Unfortuantely not. The problem was persistent no matter how I changed/optimized the pictures. In the end the layout was changed slightly to compensate for the slowdown and it was OK afterwards - but that might not be a possiblity for you.

What helped:
- try to get picture sized under 200K (compromise between quality and size)
- resizing issue can be overcome - just listen to the on orientationchange event and resize manually
- start the application in portrait mode (only possible if you use XCode & Phonegap)
- Upgrade to Touch 2 (did that now in a subsequent version update and Android release) - much better speed, you can use bigger pictures etc.

Hope that helped a bit. If you need more info just let me know.

Alex

[bowie]

Alex, thanks for your prompt reply.

My carousel contains not much images but has ~50 cards (may contains up to a hundred later). Most of them are text only.
I tried the same approach as yours, i.e. to resize manually on orientationchange, but once do that transition not smooth.

Do you mind tell me how Touch 2 perform? Is the card transition smooth?
If possible, can send me your code for try out?
I am a bit reluctant to upgrade to Touch 2 since I may have to rework all I've already done here.

Thanks in advance.

Bowie