[newhouseb]

> Although the app is small, it’s easy to imagine that a larger app made of multiple components such as this could also be made to feel just as native.

It's easy to imagine, but in my experience, doesn't match reality. Unless things have changed drastically in iOS 6, CSS can be incredibly redundant. Imagine that you have a feed with a lot of drop shadows + gradients on, say, comment buttons on each feed item. Even though the dimensions and styles are the same, for each DOM element, it's going to recalculate layout and re-rasterize the graphics. So while things may be snappy in a mockup, with real data, often times HTML5 (really the CSS) will be exceedingly memory hungry and slow to initialize, thereby killing the experience.

[jv22222]

The way to get around that is to remove drop shadows as scrolling starts. When the scrolling is complete add the drop shadows back again.

Drop shadows and alphas are the main issue, just need to manage them.

It's easy to do with a single css class added to the main body tag (i.e .isScrolling).

Then in the CSS use .isScrolling .myDiv { / no shadows / }

// On scroll start $('body').addClass('isScrolling');

// On scroll stop $('body').removeClass('isScrolling');

Works a charm!