Panzoom: Webkitベースのブラウザではズームインがぼやけています

これはpanzoomでは修正できません。 Webkitの問題です

奇妙なSVGPanにはこの問題はないようです： http ：//www.cyberz.org/projects/SVGPan/tiger.svg

SVGのグループ要素で変換を設定する場合、再確認しましたが、どちらもパンズームしません。

ひやみんな
私は昨日からpanzoomを使用していますが、SVGが現在のタスクを処理する方法であるかどうかをデザイナーに確認しています。 パンズームを使用してSVG画像のさまざまな部分をズームしたいのですが、Chromeでは、皆さんがここで説明しているように、ぼやけてしまいます。 私はそれについて何かすることができますか？ @timmywilは、「SVGのグループ要素に変換を設定する」と書くと役立つはずですが、どうすればよいですか？ どんな助けでもいただければ幸いです。
これが私が使用するコードの一部です：

var $map = $('.customers-map');
if ($map.length > 0)
{
    var $panzoom = $map.find('.panzoom').panzoom();
    $panzoom.parent().on('mousewheel.focal', function (e)
    {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        $panzoom.panzoom('zoom', zoomOut, {
            increment: 0.1,
            animate: false,
            focal: e
        });
    });
}

そして私のhtmlは：

<div class="customers-map">
    <div class="panzoom">
        <img src="images/customers/customers-map.svg">
    </div>
</div>

回避策が見つかりました。 すべてのpanzoomzoomで-webkit-perspective1と0を切り替えます。

私はこのようなことをしています：
var flag = true;
関数doThisOnEveryPanzoomzoom（）{
$（ '＃mypanzoom'）。css（{
'-webkit-perspective' :(フラグ？1：0）
}）;
フラグ=！フラグ;
}

@tlimited興味深いトリック。 これを調べます。

v1.12.4は、Chromeデスクトップとモバイルで最後に動作するバージョンです。 新しいバージョンは、iosサファリとiosクロームでのみ動作します。

tlimitedによる回避策は、デスクトップChromeで機能しますが、モバイルでは機能しません。 デスクトップクロームでは、画像がぼやけているときに、クロームインスペクターを使用してページ上の要素を強調表示すると、画像が再び鮮明になることに気付きました。 再塗装の問題？ （そのパーペクティブな変更は再描画をトリガーします、私は推測します）

私はモバイルでも機能するトリックを見つけました（ChromeおよびネイティブAndroidブラウザー）。
これらの行をcssに入れるだけです：

.panzoom {
-webkit-backface-visibility：初期！important;
-webkit-transform-origin：50％50％;
}

編集：これはうまくいくようです、
ありがとう

gius80の修正は機能しましたが、タブレットのパフォーマンスがかなり低下することがわかりました。

代わりに、ユーザーがアクションを終了した後、わずかにズームインするpanzoomonEndコールバックを追加しました。 これにより、パンズームがぼやけることなく再レンダリングされるようです。 問題の根本を突き止めるためのより良い方法があると確信していますが、この解決策は少なくともChromeデスクトップとAndroidで機能するようです。

$el.panzoom({
    onEnd: function(){
        $el.panzoom( 'zoom', {increment: .01});
    }
});

これはキャッチ22です。 この記事では、Webkitの問題について詳しく説明し-webkit-backface-visibility: hiddenを使用して要素を独自の複合レイヤーに昇格させ、ハードウェアアクセラレーションを活用しています。 これにより、デバイス間でのアニメーションのパフォーマンスが向上しました。 とは言うものの、Webkitは、アニメーションのいずれかの部分がたまたま0.5ピクセルに収まる場合に、ぼやけることなくハードウェアアクセラレーションされたレイヤーをアニメーション化しません。 Panzoomは、これに対する信頼できる普遍的な修正を提供できません。

したがって、問題は、Webkitが問題に対処するまで、Webkitでぼやけることがある高速なアニメーションが必要なのか、それともハードウェアアクセラレーションを廃止したいのかということです。

ところで、Panzoomが別のレイヤーを強制しなくても、とにかく時々発生します。 Webkitは、特定の状況（不透明度のアニメーション化など）で自動的に個別のレイヤーを作成します。

「アニメーションのいずれかの部分がたまたまハーフピクセルに該当する場合」
たぶん、ズームレベルはMath.floorまたはMath.ceilでフルピクセルに強制することができますか？

ズームレベルではありません。 記事から、要素の寸法は2で割り切れる必要があるようです。これは、Panzoomが強制するのに適切ではありません（特にレスポンシブページで）。

修正されたぼやけはコメントですlin821 // 'backface-visibility'： 'hidden'、

gius80あなたのトリックはうまくいきます、どうもありがとう。

.panzoom {
     -webkit-backface-visibility: initial !important;
     -webkit-transform-origin: 50% 50%;
 }

パンズームを有効にすると、ダウンスケールされた画像の初期レンダリングが極端にピクセル化されるという関連する問題に取り組んでいます。 これはFirefoxでは発生しませんが、ChromeとIEでは発生します。 @ gius80からの提案を適用すると、Chromeで正しくレンダリングされます。 まだIEをテストしていて、少なくともIE9では失敗しています。 一歩近づいてくれてありがとう！

@ jdonahue82 Safariでも機能しますか？ 私にとってSafariで機能するソリューションはありません。

@marcelboettcher同意します。 Safariで機能するソリューションはありません

カスタムズーム（jquery.panzoomではない）の実装に関する私の経験によると：

CSS変換を使用して複数の要素を作成し、CSS位置を使用して別の要素を重ねると、モバイルSafariとChromeがぼやけます。

これは、ハードウェアを高速化する複数のレイヤーの一般的な問題だと思います。

多分これは問題を解決するのに役立ちます。

別の回避策を見つけました！

panzoomzoomでこのコードを使用して

これは裏面の可視性と同じです。ただし、初期は非常に遅いです。 したがって、関数を100msでデバウンスできます。 これにはlodashを使用しましたが、手動でデバウンスできます。

コードは次のとおりです。

$('#panzoom-el').on('panzoomzoom', _.debounce( function () {
    this.style.display='none';
    this.offsetHeight;
    this.style.display='';
}, 100));

お役に立てれば ：）