CODEWITHSUNDEEP
javascriptjqueryhtmlipadcss
theinvisible
theinvisible

Reputation: 158

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.

Upvotes: 1

Views: 1918

Answers (1)

BeepBoop
BeepBoop

Reputation: 184

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.

E.G. Instead of this:

$(iframeControl).css('-webkit-transform', 'scale(0.5)');

Do this:

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

Upvotes: 2

Related Questions