IOS Safari, problems with slow video playback and scaling

Question

In iOS5 , I would like to scale a div , so its size is proportional to the view port. When this div contains a video element and the zoom level is too high, rendering is very slow .

Scaling is performed as follows:

  var scaleFactor = window.innerWidth / $("#videoContainer").width(); $("#videoContainer").css({ '-webkit-transform': 'scale(' + scaleFactor * 0.9 + ')', '-webkit-transform-origin': '0 0' }); 

To play click here. Then on your iOS device, click the Show button. Please note that rendering is not smooth.

Full jsfiddle demo

A few notes:

• The error is reproduced only on the iOS device (iPad / iPhone), but not on the desktop
• If initial-scale set to 1.0 , no error occurs
• If a video item is deleted, no error occurs
• Error plays on iOS6
• I tried to speed up hw by adding this css rule set to div and video { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } . But it did not help
• I tried deleting the image and replacing it with a yellow background, but that didn't help

Answer 1

Before diving into the details of this particular case, you can try adding the following set of rules that trigger hardware acceleration in iOS:

 transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); 

Answer 2

You can try using scale3d () instead of scale () as shown below:

http://jsfiddle.net/yhRNu/26/

We made several settings for your code, moving the setting outside of the click handlers and using "touchhend" instead of 'click' if the browser supports touch.

I only have access to the iPad simulator, but the above change seems to improve performance, I will also look at the test image you are using, since it exceeds 1024x768, which reportedly causes performance problems on the iOS website, see article here (2/3 of the way down - section on avoiding redrawing): http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit