2012-10-04 5 views
5

モバイルSafariのiframeでCCS3トランスフォームを使用する際に問題があります。 iframeで-webkit-transform: scale();を使用すると、iframeの内容はそれに応じて縮尺されますが、iframeでリンクされます。要素をタップするモバイルSafariでiframeを拡大すると、iframeのリンクが破損しています

ヒットボックスを強調し、リンクhitboxesがスケーリングされていないことが表示されます。リンクをタップすると、iframeが拡大縮小されていない場合のリンクの位置にヒットボックスが表示されます。

変換元がどこに設定されているかにかかわらず、リンクが左上隅から離れるほど悪化します。

同じページ私はこれをテストしていますが、私のコンピュータ上のSafariとChromeでは完全に動作しているので、これはモバイルサファリのバグだと思われます。

これは既知の問題ですか?誰かが回避策を知っていますか?私はズームプロパティを使用してみましたが、iframeの内容だけでなく、サイズを変更します。

ここに例をアップロードしました:http://trrrm.com/iframe/ iOSデバイスでこれを開き、iframe内のリンクをクリックすると、意味がわかります。

ありがとうございました!

+0

この情報は役に立ちましたか? http://stackoverflow.com/questions/14175464/webpage-on-mobile-safari-is-not-scaling-to-fit-viewport –

+0

こんにちはterrarum あなたはこれについての答えを見つけましたか?私はまったく同じ問題を抱えています。 –

+0

CarolとClaesのコメントをありがとう、私はちょうどそれらを見た、私は電子メールの通知が設定されていないと思う!私は最後に何をしたのか覚えていないが、Claesはおそらく今気にしないだろうと思う。 – terrarum

答えて

0

これは既知の問題です。縮尺のiframeのタッチイベントは、iOSで正しく機能しません。 iFrameのコンテンツを作成する場合は、代わりにコンテンツの本体要素を拡大/縮小できます。

iOS6ではアニメーションによる翻訳でも問題が発生することに注意してください。タッチイベントが正しく機能するようにアニメーションを完成させた後、iframeのトップを1pxだけ変更する必要がありました。

ウェブキットはan open bug on transformed iframesです。

関連する問題