7

在iOS5中，我想缩放 adiv使其大小与视口成正比。当它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. 该错误重现于iOS6
  5. 我试图通过将此 css 规则集添加到 div 和 video 来触发硬件加速{ transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }。但这没有帮助
  6. 我试图删除图像并用黄色背景替换它，但它没有帮助
4

2 回答 2

0

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

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
于 2012-09-20T15:06:20.023 回答
0

您可以尝试使用 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

于 2012-10-08T13:35:46.820 回答