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