javascript - iOS野生动物园，视频和缩放比例呈现速度慢的问题

在iOS5中，我想缩放一个div，使其大小与视口(viewport)成比例。当此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，则不会发生错误

如果删除了video元素，则不会发生错误

该错误再现在iOS6

上

我试图通过将此CSS规则集添加到div和视频{ transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }中来触发硬件加速。但这对

没有帮助

我尝试删除该图像并将其替换为黄色背景，但它没有帮助

最佳答案

在深入研究此特定情况的细节之前，您可能想要尝试添加以下规则集，这些规则集会触发iOS上的硬件加速:

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