html - kineticjs キャンバスを表示する iframe を再スケーリングすると、iPad でタッチ位置が誤って解釈される

Question

KineticJSを使用してウィジェットを作成しています(これは素晴らしいことです)。これにより、ユーザーはキャンバス内で画像をドラッグできます。

内でウィジェットを表示して使用できますiframe。これは、私が試したすべてのブラウザーとデバイスで完全に機能します。

iframeページがレスポンシブになるように、それをスケーリングすることもできます。別のスタックオーバーフローの投稿に続いて、以下を追加しましたcss:

@media screen and (max-width : 768px) {
    iframe {
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        -moz-transform: scale(0.85);
        -o-transform: scale(0.85);
        -webkit-transform: scale(0.85);
    }
}

これは私のMacでうまく機能します。

しかし、iPad では、iframe適切にスケーリングされているように見えますが、要素をドラッグしようとすると、スケーリングされていない位置にあると思われるようです。

これをiPadでも動作させる方法はありますか？それとも、自分のデザインを再考する必要がありますか (その場合、どのデザインを使用すればよいですか)?

ありがとう！