CSS 3D変換を使用してdivをズームしています。例:
_-webkit-transform: scale3d(2,2,1);
_
スケーリング自体は、どのWebKitブラウザーでも正常に機能します。ただし、Safari(モバイルまたはWindows)でこれを使用すると、divのコンテンツは再レンダリングされません。その結果、スケーリング後にコンテンツがぼやけます。
この効果は、3D変換を使用している場合にのみ発生します。使用するとすべて正常に動作します
-webkit-transform: scale(2);
。
IPhone/iPadでハードウェアアクセラレーションを活用するには、3D変換を使用するとよいでしょう。
Safariに新しいスケールでdivを再レンダリングするように指示する方法を知っている人はいますか?
Safari(デスクトップv7.0.2およびiOS 6.1.3および7.0.6に含まれているもの)でズームインをぼかさないようにするための修正を見つけることができませんでしたが、ある時点で、シャープなpngを取得したことに気付きました。スケールを5に設定しました。その後のすべての変更でそのバージョンのコードが失われるため、理由はわかりません。他のすべてのスケールファクターはぼやけていました。
IPhoneとiPadがこのプロジェクトのターゲットデバイスであるため、スケール変換を放棄し、代わりに画像の高さをアニメーション化することになりました。 Safariチームが、多くの場合、変換を実行不可能なオプションにする方法で変換を実装することを決定したことに失望しています。
うーん...グーグルマップの画像(hidpi)をChrome 53で拡大しようとすると同じ問題が発生します。
1つの解決策は、画像を数フレーム(または画像/画像/それが何であれラップするコンテナ)の間非表示(不透明度、可視性)にすることです... SOこれでした(含まれているDIVで発行されました):
e.style.transform = 'translateZ(0) scale(1.0, 1.0)'
ところで、私のものは普通の2Dのものでしたが、3Dには触れたことがないのに、translateZが違いを生むようです。
うーん...グーグルマップの画像(hidpi)をChrome 53で拡大しようとすると同じ問題が発生します。
私がこれまでに見つけた唯一の解決策は、画像(または画像を含むdiv)を非表示にしてから、もう一度表示することです。 opacity = 0またはvisibility = hiddenを使用できますが、実際には少なくとも1〜2フレームは非表示にする必要があります。
ところで、これは3D変換でもありません。ただ2Dのもの。