javascript - iOS css-webkit-转换 : scale doesn't offset touch events

Question

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

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

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

Answer 1

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

标记

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

CSS

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

fiddle :http://jsfiddle.net/gyHR6/

---

更多关于 -webkit-transform-style 的信息: https://www.webkit.org/blog-files/3d-transforms/transform-style.html