iOS Safari，视频和比例渲染缓慢问题

Question

在iOS5 中，我想缩放div，使其大小与视口成正比。当这个div 包含video 元素并且缩放级别太高时，渲染会非常慢。

缩放是这样完成的：

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

To reproduce click here. 然后在您的iOS 设备上，按下Show 按钮。请注意，渲染并不流畅。

The complete jsfiddle demo

几点说明：

1. 该错误仅在 iOS 设备 (iPad/iPhone) 上重现，而不在桌面上重现
2. 如果将initial-scale 设置为1.0，则不会出现该错误
3. 如果移除视频元素，则不会出现该错误
4. 该错误在iOS6 上重现
5. 我已尝试通过将此 css 规则集添加到 div 和视频 { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } 来触发硬件加速。但这没有帮助
6. 我尝试删除图像并将其替换为黄色背景，但没有帮助

Answer 1

在深入了解此特定案例的详细信息之前，您可能想尝试添加以下规则集，它们会在 iOS 上触发硬件加速：

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

Answer 2

您可以尝试使用 scale3d() 而不是 scale()，如下所示：

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

还对您的代码进行了一些调整，将设置移到点击处理程序之外，如果浏览器支持触摸，则使用“touchend”而不是“click”。

我只能访问 iPad 模拟器，但上述更改似乎提高了性能，我还会查看您使用的测试图像，因为它超过 1024x768，据报道这会导致 iOS webkit 出现性能问题，请参阅文章此处（向下 2/3 - 关于避免重绘的部分）：http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit