CODEWITHSUNDEEP
javascriptioscssmobile-safari
jckdnk111
jckdnk111

Reputation: 2378

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

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?

Upvotes: 13

Views: 7190

Answers (1)

couzzi
couzzi

Reputation: 6366

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

Upvotes: 7

Related Questions