css 変換を使用して、ios デバイスでdivをスクロール可能にする手段が見つかりました。IOS サファリの iframe に問題があります。css3 変換を使用して iframe 内のコンテンツをスクロールしようとすると、結果のコンテンツが画面に最初にレンダリングされたものにクリップされます。これは Android デバイスでは正常に機能し、IOS のDIVでは機能しますが、iframe では機能しません。これは、Safari Webkit 実装のバグのようです。iframe の高さを、含まれているコンテンツよりも大きくしようとしましたが、iframe でオーバーフローが有効になっていることを確認しました。
誰かが回避策を思いつくことができましたか? リモートコンテンツ用のiframeが絶対に必要なので、最後の手段は、サーバー側のページを介してコンテンツをプロキシし、javascriptを挿入して、子のbodyタグでtranslate3dを実行することです:これはうまくいくようです.
画像 - 3D 変換後 (クリッピングに注意) :
悲しいことに、私はあなたへの答えを持っていませんが、iOS Safari では IFrame を避けるというのが一般的な意見のようです。サポートはバグが多すぎます。したがって、信頼できるサードパーティのコンテンツのみにロックダウンすると仮定して、リモートコンテンツにサーバー側プロキシを使用するアプローチを 2 番目に使用します。
また、iOS 4.2 Safari の 3D 変換された div の明らかな幅制限にも注意してください - 122,900 ピクセルで切り取られていることがわかりました (この「機能」は iOS 3.2 にはありませんでした)。
しばらく時間がかかりましたが、最終的に成功したと思います。
http://blog.derraab.com/2012/04/02/avoid-iframe-content-clipping-with-css-transform-on-ios/からの引用
i フレームまたはその親で CSS 変換を使用する場合は常に、基本的な CSS 変換を i フレーム コンテンツの body タグにも適用する必要があります。それでおしまい。
更新: 必ず目に見える位置から開始してください!