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

一些评论：

该错误仅在iOS设备（iPad / iPhone）上重现，但不在桌面上重现
如果initial-scale设置为1.0，则不会发生错误
如果删除了视频元素，则不会发生错误
该错误会在iOS6
我试图通过将此css规则集添加到div和视频{ transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }来触发hw加速。但它没有帮助
我试图删除图片，并用黄色背景替换它，但它没有帮助

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

iOS Safari，视频和缩放的渲染速度慢

2 个答案: