javascript - -webkit-转换 : scale breaks down when zoomed in on iOS

Question

编辑:这些问题似乎已被 iOS8 修复。将此问题视为 iOS7 和更早版本的错误。

我有一些内容(受 CORS 约束)在 iframe 中提供，我希望它们始终延伸到浏览器窗口的底部。我需要此内容保持相同的宽高比并填充浏览器的整个宽度，否则看起来会很奇怪。因为我无权访问 iframe 的内容，所以我正在使用 -webkit-transform: scale 以正确调整所有内容的大小。

我正在计算比例因子:

width = 600; // this is the original width of the iframe's contents and never changes
scaleFactor = window.innerWidth/width;

然后，每当 window.innerWidth 更改大小时，我都会根据该 scaleFactor 设置一些 CSS:

$container.css({
    'width': (width * scaleFactor) + 'px',
    'height': (height * scaleFactor) + 'px',
    'padding': 0
});
$iframe.css({
    '-webkit-transform': 'scale('+scaleFactor+')',
    'transform': 'scale('+scaleFactor+')',

    '-webkit-transform-origin': '0 0',
    'transform-origin': '0 0'
});

这在任何地方都可以完美运行， iOS 除外，如果您放大得太远，它就会开始崩溃。 iFrame 开始偏离页面并且不够宽。我不知道这里发生了什么。

我所说的图像:Good scaling , Bad scaling .

我有一个 test page setup here清楚地说明了任何 iOS 上的问题。

有人有什么想法吗？

Answer 1

这是我放弃之前广泛调查的结果。

应用转换涉及两个主要问题:缩放到 iOS 上的 iframe 内的内容。第一个是我在原始问题中指出的内容，如果您使用固定位置元素，内容就会开始偏离页面上的指定位置。它的工作原理似乎是基于元素的原始大小、比例因子和可能的视口(viewport)宽度。在我的测试中，当以任何大于 0.85 的因子缩放时，大元素可能会完美缩放和定位。只要比例因子至少 >3.5，一个小元素就可以完美定位。这看起来几乎是随机的，所以我没有费心去确定确切的点是什么。

我没有在相对定位的元素上尝试这个，但我假设它们的功能类似于固定位置的元素。

对此有一个相当笨拙的解决方法，涉及使用使用滚动偏移量和 innerHeight 锚定到页面底部的绝对定位元素。即:

container.css('top', (document.body.scrollTop + window.innerHeight - container.height()) + 'px');
container.css('left', document.body.scrollLeft);

并在每次拖动、变换、捏合、调整大小等时更新此方法。此方法有一些奇怪之处(iOS 直到拖动完全停止后才更新滚动偏移)但如果您绝对必须这样做，它是可行的做吧。

然而，尽管这是可能的，但当您在 ​​iOS 上的 iframe 中缩放内容时，如果您有任何 anchor 标记(或其他需要点击的元素)，可点击区域将保持未缩放状态。如果您在 200x100 的 anchor 标记内有一张图片，并将其缩放 2 倍，则图片将是原来的两倍大，但 anchor 只会响应前 200x100。使用 iOS 模拟器，如果您双击可点击区域之外的图像，Safari 甚至可以帮助您使原始边界变暗，以便您知道可以点击的位置。如果您想显示不需要单击或其他输入的文本/图像以外的任何内容，这几乎是一个交易破坏者。更多信息在这里:

CSS3 Transform scaling issue on IPad Safari

"-webkit-transform: scale(2)" doesn't affect click area of Facebook Like Button (on iPad)

在 Apple 修复移动版 Safari 中这些长期存在的错误之前，尝试使用 webkit-transform 缩放 iframe 内容似乎不是一个可行的选择，除非您只针对 Chrome。

编辑:

Demo of scaling issues here .