1

私は次のHTML構造を持っています

<body>
  <div id="graphic">
   <div id="wrap">
     <svg width="8000px" height="32000px">
      ....
     </svg>
   </div>
  </div>

そして、それに適用される次のCSS：

#graphic {
  width: 768px;
  height: 1004px;
  overflow: hidden;
}

#wrap {
  width: 768px;
  height: 1004px;
  -webkit-transform: scale(1) translate3d(0, 0, 0);
}

CSS3アニメーションを使用して、非常に大きなsvgグラフィックをパン/ズームしたいと思います。それは働いています...一種です。iPadで、translate3dのy値を16500px未満に設定すると、グラフィックが表示されなくなるという問題を発見しました（SafariまたはChromeでは完全に正常に機能します）。モバイルSafariでのSVGのレンダリングの高さ/幅には制限があるかもしれないと思いましたが、＃graphicコンテナーからoverflow：hiddenを削除すると、一番下までスクロールして、すべてが正しく表示されます。

誰かが同様の制限を聞いた、または経験したことがあります/この全体が機能すると考えるために設定する必要のあるCSS値はありますか？どんな助けでも大歓迎です。

4

1 に答える 1

3

はい、制限に達しました。Translate3Dの要素はGPUテクスチャメモリに収まる必要があり、「オーバーまたはアンダートランスレート」すると、テクスチャ全体がダンプされる可能性があります。テクスチャメモリの制限については、Appleのドキュメントを参照してください。

于 2012-07-03T00:45:08.603 に答える