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 appears when i Long press the link, on some other place.

Note: The links are 'absolute' positioned in the page.

Please help.

Answers:

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.