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

我有一个我需要拉动在iOS设备上显示的iframe。 iframe的内容不在我的控制之下,并且不以任何方式响应(固定为800×600)。 所以我想缩小iframe以在iOS视口中显示它。

使用-webkit-transform: scale(0.4)我可以缩小它,但现在触摸事件都是错误的(例如,触摸表单元素不会popup打开键盘)。 如果在缩放之前触摸元素所在的位置,则会起作用。

有没有办法纠正触摸事件的偏移量?

selectscale3d而不是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