Panzoom: Zoom-in buram di browser berbasis webkit

Ini tidak dapat diperbaiki dengan panzoom. Ini adalah masalah webkit

SVGPan yang aneh sepertinya tidak memiliki masalah ini: http://www.cyberz.org/projects/SVGPan/tiger.svg

Saya memeriksa ulang dan begitu juga panzoom jika pengaturan berubah pada elemen grup di SVG.

Hai guys
Saya telah menggunakan panzoom sejak kemarin dan saya masih memeriksa dengan desainer kami apakah SVG adalah cara untuk menangani tugas kami saat ini. Saya ingin menggunakan panzoom untuk memperbesar bagian yang berbeda dari gambar SVG, tetapi di Chrome itu menjadi buram, seperti yang kalian diskusikan di sini. Dapatkah saya melakukan sesuatu tentang hal itu? @timmywil Anda menulis bahwa "pengaturan transformasi pada elemen grup di SVG" akan membantu, tetapi bagaimana saya melakukannya? Bantuan apa pun akan dihargai.
Berikut potongan kode yang saya gunakan:

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
        });
    });
}

dan html saya adalah:

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

Menemukan solusi. Saya membalik antara -webkit-perspective 1 dan 0 di setiap panzoomzoom.

Saya melakukan sesuatu seperti ini:
var bendera = benar;
fungsi doThisOnEveryPanzoomzoom(){
$('#mypanzoom').css({
'-webkit-perspective': (bendera?1:0)
});
bendera = !bendera;
}

@tlimited Trik yang menarik. Aku akan melihat ke dalam ini.

v1.12.4 adalah versi terakhir yang berfungsi dengan desktop dan seluler chrome. Versi yang lebih baru hanya akan berfungsi pada ios safari dan ios chrome.

Solusi dengan tlimited akan berfungsi di desktop chrome tetapi tidak di seluler. Saya perhatikan bahwa di desktop chrome ketika gambar buram, jika Anda menggunakan chrome inspector dan menyorot elemen apa pun di halaman, gambar menjadi tajam kembali. Masalah cat ulang? (perubahan perspektif itu memicu pengecatan ulang, saya berasumsi)

Saya menemukan trik yang juga berfungsi di ponsel saya (chrome dan browser Android asli).
Letakkan saja baris-baris ini di css:

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

EDIT: Ini sepertinya berhasil,
Terima kasih

Saya menemukan bahwa perbaikan gius80 berhasil, tetapi itu sedikit memperlambat kinerja pada tablet.

Sebagai gantinya, saya menambahkan panggilan balik panzoom onEnd yang memperbesar sedikit setelah pengguna menyelesaikan tindakan mereka. Ini tampaknya menyebabkan panzoom dirender ulang tanpa buram. Saya yakin ada cara yang lebih baik untuk mendapatkan akar masalahnya, tetapi solusi ini tampaknya berfungsi di desktop Chrome dan setidaknya Android.

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

Ini adalah tangkapan-22. Masalah webkit dijelaskan dengan baik di artikel ini . Panzoom menggunakan -webkit-backface-visibility: hidden untuk mempromosikan elemen ke lapisan kompositnya sendiri untuk memanfaatkan akselerasi perangkat keras. Ini telah meningkatkan kinerja animasi di seluruh perangkat. Meskipun demikian, webkit tidak menganimasikan lapisan yang dipercepat perangkat keras tanpa mengaburkan ketika ada bagian dari animasi yang jatuh pada setengah piksel. Panzoom tidak dapat memberikan perbaikan universal yang andal untuk ini.

Jadi, pertanyaannya adalah, apakah kita menginginkan animasi yang lebih cepat yang terkadang buram di webkit hingga webkit mengatasi masalah tersebut, atau apakah kita ingin menghentikan akselerasi perangkat keras?

BTW, bahkan jika Panzoom tidak memaksa lapisan terpisah, itu akan terjadi kadang-kadang. Webkit akan secara otomatis membuat lapisan terpisah dalam keadaan tertentu (misalnya opacity animasi).

"ketika ada bagian dari animasi yang jatuh pada setengah piksel"
Mungkin tingkat zoom dapat dipaksa untuk piksel penuh dengan Math.floor atau Math.ceil?

Ini bukan tingkat zoom. Dari artikel tersebut, tampaknya dimensi elemen harus mulai habis dibagi 2, yang tidak sesuai untuk diterapkan oleh Panzoom (terutama pada halaman responsif).

Keburaman yang diperbaiki adalah komentar lin 821 //'backface-visibility': 'hidden',

gius80 trik Anda berhasil, terima kasih banyak.

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

Saya sedang mengerjakan masalah terkait di mana rendering awal gambar yang diperkecil menjadi sangat piksel ketika panzoom diaktifkan. Ini tidak terjadi di Firefox, tetapi terjadi di Chrome dan IE. Saat menerapkan saran dari @ gius80, saran tersebut

@jdonahue82 apakah ini berfungsi untuk Anda di Safari juga? Tidak ada solusi yang berfungsi di Safari untuk saya.

@marcelboettcher saya setuju. Tidak ada solusi yang berfungsi untuk Safari

Menurut pengalaman saya dengan implementasi zoom khusus (bukan jquery.panzoom):

Safari Seluler dan Chrome menjadi buram setelah Anda memiliki beberapa elemen menggunakan transformasi CSS yang diletakkan di atas yang lain menggunakan posisi CSS.

Saya kira ini adalah masalah umum dengan banyak lapisan yang mempercepat perangkat keras.

Mungkin ini berguna untuk memecahkan masalah.

Menemukan solusi lain!

Anda dapat memaksa menggambar ulang menggunakan kode ini di panzoomzoom.

Ini sama dengan visibilitas backface: awal, meskipun, sangat lambat. Jadi Anda dapat mendebounce fungsi dengan 100 ms. Saya menggunakan lodash untuk ini, tetapi Anda dapat melakukan debounce secara manual.

Berikut kodenya:

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

Semoga ini membantu :)