Page transition re-think: Smoother, faster

[toddparker]

For the next release, improving page transitions is a top priority. It's clear that overlfow: support isn't broadly supported and that JS scrollers are heavy and only work on a small slice of our target platforms so we need to make sure that we have a solid set fo baseline transitions that work on the greatest number of platforms and are as smooth and blink-free as possible.

• need a re-think to embrace the constraints we have
• scrolling the docs can't be avoided, but we can hide the jumpiness = introduce 1-2 new transitions that are smooth on all our platforms and work within the performance realities and constraints we have
• video sketch for animations (slow to illustrate the steps) - http://www.youtube.com/watch?v=di3-fz5TZKQ
• consider packing the new transitions with the switch from keyframe-based animations to transitions so we can package these with Opera, Firefox and IE10 support
• speed up page load/enhancement/transition time overall

[woutervanwijk]

This needs to be done I guess. Since this is a mobile framework, i would consider not putting too much effort into desktop browsers. Make it work great on the important mobile platforms, and make it work 'ok' on the desktop and older mobile platforms. Though I know it's platform independent, It would help jqm if it would be possible to easily a near native app using ts library (as in smoothness, rendering,etc). The other frameworks are either incomplet or difficult, so this is a big opportunity.

[karol-f]

I agree with @woutervanwijk and I'm sure you are aware of it. Regards.

I am having serious issues with page transitions for Android compared to iOS

[hendricius]

Thanks, this will be a killer to have this fixed.

I hate when it blinks too.

[justinribeiro]

As requested Todd, I'm commenting on this thread with the details about Android 4.0.1 animations. We're a little dumbfounded here that office ourselves as to why the animations appear so poorly. I'm happy to help test, so I'll hop on to the dev IRC this afternoon.

• Device: Samsung Galaxy Nexus GSM
• OS: Android 4.0.1
• Affected Version: 1.0.1 Final

The page transitions are pretty harsh on Android 4.0, as seen in the following video which navigates the JQM demo site (http://www.youtube.com/watch?v=aHKozRk29b0). You end up with a sort of flash/double blink jumpiness before the page appears.

[jblas]

@justinribeiro

It would be great to work with someone who has a 4.0.x device, as I don't have one. Ping me (kinblas) when you hop on dev IRC.

In the meantime, when you get a chance, perhaps you can run through some of the pages I have here:

http://goo.gl/oz4NY

and see if/when things start blinking. Those pages were me trying to figure out methodically what it is that causes the blinks. Most of the pages make NO use of jQuery Mobile and use some small JS that just kicks off the transitions. I was seeing flashes (white flashes, or flashes of previous content) upon completion of the animations, even when leaving the animations classes on.

Most of the tests are set up to click once to start animation, click a 2nd time to reset for running the animation again.

[patrickdet]

This is not just an issue on Android. On iOS we have the same issue.

[jblas]

@patrickdet

If you have a sample we can use to repro on iOS that would be great!

[hendricius]

@jblas @patrickdet here is the link: http://test.orderpass.com/app/ - sign it with: aam5p1, table number 1.

[toddparker]

@jblas - For the record, all of those demos in your link flash in Honeycomb, starting with the first.
Also confirming the same result from @justinribeiro on ice cream sandwich (4.0) on his Nexus (he noted this in IRC).

I think Android is just not able to hack any of these transforms and things aren't getting better with time. So disappointing.

[masteinhauser]

This is slightly(maybe more) off-topic, but it explains some of how Android handles web page rendering. It seems they are moving to a split between GPU and CPU rendering based on power and other requirements as well as tile based rendering like iOS uses.

tl;dr: Android rendering getting closer to iOS style moving forward.

https://plus.google.com/105051985738280261832/posts/2FXDCz8x93s