Javascript iOS safari，视频和缩放的缓慢渲染问题

在

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

按钮。请注意，渲染不是平滑的

几句话：

该漏洞只会在iOS设备（iPad/iPhone）上重现，但不会在桌面上重现

如果

初始刻度设置为
1.0
，则不会发生错误

如果删除视频元素，则不会发生错误

错误会在iOS6上重现

我试图通过将此css规则集添加到div和video

{
变换：translate3d（0,0,0）；
-webkit转换：translate3d（0,0,0）；
}

。但这没用

我试图删除图像并用黄色背景替换它，但没有效果

---

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

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

---

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

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

---

我只能访问iPad模拟器，但上述更改似乎提高了性能，我还将查看您正在使用的测试映像，因为它超过1024x768，据报道会在iOS webkit上导致性能问题，请参阅本文（2/3向下-避免重绘部分）：

我已将此css规则集添加到

div

和

video

中，但没有任何帮助（请看：）我已将图像替换为黄色背景。但是黄色的div仍然闪烁，我看不出

scale3d

和

scale

之间有什么区别。