javascript - iOS css -webkit-transform: スケールがタッチ イベントをオフセットしない

Question

iOS デバイスで表示するためにプルする必要がある iframe があります。iframe のコンテンツは私の制御下になく、応答しません (800x600 に固定)。そこで、iframe を縮小して iOS ビューポートに表示したいと思います。

を使用-webkit-transform: scale(0.4)して縮小できましたが、タッチイベントがすべて間違っています（たとえば、フォーム要素に触れてもキーボードが開きません）。スケーリングする前に要素があった場所に触れると、機能します。

タッチ イベントのオフセットを修正する方法はありますか?

Answer 1

のscale3d代わりに選択しscaleます。私の経験では、レスポンシブが必要な要素の変換は、要素が高速化されたスタックにプッシュされたときに達成されました。

マークアップ

<iframe src="http://wikipedia.org" width="200" height="200"/>

CSS

iframe {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: scale3d(0.4,0.4,0.4);
}

フィドル: http://jsfiddle.net/gyHR6/

---

詳細は-webkit-transform-styleこちら: https://www.webkit.org/blog-files/3d-transforms/transform-style.html