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

Question

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

使用-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);
}

小提琴：http: //jsfiddle.net/gyHR6/

---

更多关于-webkit-transform-style这里： https ://www.webkit.org/blog-files/3d-transforms/transform-style.html