こんにちは、非常に奇妙な問題に遭遇しました。これはすべて、iPad 3 で iOS 6.1 モバイル サファリを使用していることに注意してください。
そのため、約 1500 個のオブジェクト (長方形のような単純なもの) を含む大きな SVG ファイルがあります。この svg ファイルを直接サファリにロードすると、非常に高速で応答性が高くなります。パンとピンチで非常に高速にズームでき、すべてが鮮明にレンダリングされます。
しかし、これは私が作成している Web サイトには十分ではありません。svg ファイルを div にロードし、ユーザーがパンとズームできるようにする必要があります。これを行うために、いくつかのタッチ イベント ハンドラーを追加し、3D CSS 変換を使用して svg をアニメーション化しました。ただし、パンには非常にうまく機能しますが、svg をズームすると、ピクセル化され始めます。
これらのアプローチはどちらもハードウェア アクセラレーションを使用していますが、後者はぼやけてピクセル化されているように見えますが、前者はそうではないため、これは非常に紛らわしいです。
これがなぜなのか、どうすれば修正できるのか知っている人はいますか?
ありがとう。
参考までに、これは svg をパンおよびズームする方法です。
<div style="-webkit-transform: scale3d(4, 4, 1) translate3d(20px, 100px, 0px);">
<svg version="1.1" width="1024px" height="512px">
...
</svg>
</div>