iOS css -webkit-transform：scale不会抵消触摸事件 [英] iOS css -webkit-transform: scale doesn't offset touch events

问题描述

我有一个iframe，我需要在iOS设备上显示。 iframe的内容不在我的控制之下，他们没有以任何方式响应（固定800x600）。因此，我想缩放iframe以便在iOS视口中显示。

I have an iframe I need to pull in for display on iOS devices. The contents of the iframe are not under my control and they are not responsive in any way (fixed 800x600). So I'd like to scale the iframe down to display it in the iOS viewport.

使用 -webkit-transform：scale / code>我能够缩放，但现在触摸事件都错了（例如触摸表单元素不会弹出打开键盘）。

Using -webkit-transform: scale(0.4) I was able to scale it down but now the touch events are all wrong (e.g. touch a form element doesn't pop open the keyboard). If you touch where the element was before scaling it works.

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

Is there any way to correct the offset for touch events?

推荐答案

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

Opt for scale3d instead of scale. In my experience, transforming elements that need to be responsive was better achieved when the element was pushed into the accelerated stack.

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

CSS

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

这篇关于iOS css -webkit-transform：scale不会抵消触摸事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！