Css3 Transform Scaling Issue On Ipad Safari

I am dynamically scaling the iframe using CSS3 Transform: scale() property in javascript. Scaling is working fine but the page hyperlinks are no more clickable. A grey rectangle ap

Solution 1:

This issue occurs in Safari on iOS6 when applying -webkit-transform to an iframe. It does not occur in iOS7 or Chrome on iOS.

It appears as though although the content is visually scaled, it thinks the anchor is in it's original position still (the grey box you are seeing is the click effect on the anchor).

Applying it to the body of the iframe's document resolves the issue while producing the same visual effect.

eg. Instead of this: $(iframeControl).css('-webkit-transform', 'scale(0.5)');

Do this: $(iframeControl.contentDocument.body).css('-webkit-transform', 'scale(0.5)');