iOS css -webkit-transform:scale不会抵消触摸事件

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