We're using a scaling technique to improve the resolution of our canvas web apps on the retina display. Basically, the technique described here:
http://zsprawl.com/iOS/2012/03/html5-canvas-and-retina-displays/
However, we've noticed a SIGNIFICANT performance difference when running in landscape mode vs portrait mode. I've set up a jsFiddle test app to demonstrate this. You can notice the difference if you view the embedded version:
http://jsfiddle.net/SaJ69/embedded/result/
(removing the /embedded/result/ will take you to the original fiddle. I could only have a post with 2 links in it)
If you switch between portrait and landscape when viewing this on an iPad3 (you'll need to refresh the browser window between switches) you can see that portrait mode is choppier than landscape. When running this on my own webserver (not through jsFiddle), the results are much more noticeable.
I tried to do some frame rate metrics, but they're only measuring the number of times we make draw calls, not the number of times the browser will actually update.
Anyone have any insight into this? Is this a hardware related issue? We are theoretically doing the same draw calls and filling the same number of pixels right?
-Chris
It seems one working fix is to clamp the canvas width to 1023, so that the double density canvas is 2046 px wide; discovered by Arima & explained here: http://www.scirra.com/forum/retina-ios-performance-problem-fix-please-test_topic58742.html