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'
    });

要重现,请单击此处.然后在您的iOS设备上按下Show按钮.请注意,渲染不平滑.

完整的jsfiddle演示

几点评论:

1. 该错误仅在iOS设备(iPad/iPhone)上重现,但不在桌面上重现
2. 如果initial-scale设置为1.0,则不会发生错误
3. 如果删除了视频元素,则不会发生错误
4. 这个bug重现了 iOS6
5. 我试图通过将此css规则集添加到div和视频来触发hw加速{ 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);