javascript - iOS Safari，视频和比例呈现缓慢的问题

Question

在 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

几点说明:

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