iOS css -webkit-transform：缩放不抵消触摸事件答案

【问题标题】：iOS css -webkit-transform: scale doesn't offset touch eventsiOS css -webkit-transform：缩放不抵消触摸事件
【发布时间】：2013-08-11 23:39:08
【问题描述】：

我有一个 iframe 需要拉入以在 iOS 设备上显示。 iframe 的内容不在我的控制之下，并且它们不以任何方式响应（固定为 800x600）。所以我想缩小 iframe 以在 iOS 视口中显示它。

使用-webkit-transform: scale(0.4) 我可以缩小它，但现在触摸事件都错了（例如，触摸表单元素不会弹出键盘）。如果在缩放之前触摸元素所在的位置，它会起作用。

有什么方法可以纠正触摸事件的偏移量？

【问题讨论】：

嘿 jckdnk111，你解决过这个问题吗？我现在正在调查这个。如果你解决了，你能更新答案吗？
我从来没有解决它。最后，我要求 iframe URL 的所有者创建一个 postMessage API，以便我可以要求页面缩小自身（例如，对 iframe 中的文档正文使用转换）。它很 hacky，但它可以工作——如果你不能让 iframe 页面自行缩放，那么恐怕你可能只是运气不好。

【解决方案1】：

选择scale3d 而不是scale。根据我的经验，当元素被推入加速堆栈时，可以更好地转换需要响应的元素。

<iframe src="http://wikipedia.org" width="200" height="200"/>

iframe {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: scale3d(0.4,0.4,0.4);
}

【讨论】：

Scale3d 似乎不影响触控区域。在我们的例子中，它实际上只是让图像变得模糊。
您可以发布您的事件处理程序以用于 touchstart 等吗？
-webkit-transform: scale() 和 scale3d() 在 iframe 上都可以正常工作，只要您缩小 iframe。如果将其放大，则点击区域不会超过 1 倍。在这里演示：adexcite.com/iframe_scaling_test.html
这解决了我的 iOS8 问题；添加二维比例后，触摸事件不会触发。现在有了 3d 比例，一切都按预期工作。谢谢！
似乎这个问题在 iOS 9 中仍然存在。当放大 iframe 时，每个触摸事件都停止工作。嗯。