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

css, ios, javascript, mobile-safari

Solution

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

Problem

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. 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?

Original source