iOS css -webkit-transform: scale doesn't offset touch events

Question

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\'

Answer 1

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.

Markup

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

Fiddle: http://jsfiddle.net/gyHR6/

---

More about -webkit-transform-style here: https://www.webkit.org/blog-files/3d-transforms/transform-style.html