javascript - iPad Safari での CSS3 Transform のスケーリングの問題

Question

CSS3 Transform: scale() プロパティを JavaScript で使用して、iframe を動的にスケーリングしています。

スケーリングは正常に機能していますが、ページのハイパーリンクをクリックできなくなりました。

別の場所でリンクを長押しすると、灰色の四角形が表示されます。

注: リンクはページ内に「絶対」に配置されています。

助けてください。

Answer 1

この問題は、iOS6 の Safari で -webkit-transform を iframe に適用すると発生します。iOS7やiOS上のChromeでは発生しません。

コンテンツが視覚的にスケーリングされているように見えますが、アンカーはまだ元の位置にあると見なされます (表示されている灰色のボックスは、アンカーに対するクリック効果です)。

iframe のドキュメントの本文に適用すると、同じ視覚効果を生成しながら問題が解決されます。

例えば。これの代わりに: $(iframeControl).css('-webkit-transform', 'scale(0.5)');

これを行います: $(iframeControl.contentDocument.body).css('-webkit-transform', 'scale(0.5)');