Panzoom: O zoom está borrado em navegadores baseados em webkit

Isso não pode ser corrigido pelo panzoom. É um problema do webkit

O SVGPan estranho não parece ter esse problema: http://www.cyberz.org/projects/SVGPan/tiger.svg

Eu verifiquei duas vezes e nem o panzoom se a configuração de transformações em um elemento de grupo em SVG.

Oi pessoal
Estou usando o panzoom desde ontem e ainda estou verificando com nosso designer se SVG é a maneira de lidar com nossa tarefa atual. Eu gostaria de usar o panzoom para dar zoom em diferentes partes da imagem SVG, mas no Chrome fica embaçado, como vocês discutem aqui. Posso fazer algo sobre isso? @timmywil, você escreverá que "definir transformações em um elemento de grupo em SVG" deve ajudar, mas como faço isso? Qualquer ajuda seria apreciada.
Aqui está o código que uso:

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

e meu html é:

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

Encontrou uma solução alternativa. Eu alterno entre -webkit-perspective 1 e 0 em cada panzoomzoom.

Estou fazendo algo assim:
var flag = true;
function doThisOnEveryPanzoomzoom () {
$ ('# mypanzoom'). css ({
'-webkit-perspective': (sinalizar? 1: 0)
});
flag =! flag;
}

@tlimited Truque interessante. Vou dar uma olhada nisso.

v1.12.4 é a última versão funcional com Chrome para desktop e celular. As versões mais recentes funcionam apenas no ios safari e no ios chrome.

A solução alternativa por tlimited funcionará no Chrome para desktop, mas não no celular. Notei que no cromo da área de trabalho, quando a imagem está borrada, se você usar o inspetor de cromo e destacar qualquer elemento na página, a imagem fica nítida novamente. Problema de redesenho? (essa mudança em perspectiva desencadeia repintura, eu suponho)

Eu encontrei um truque que funciona também no celular para mim (Chrome e navegador nativo do Android).
Basta colocar estas linhas em css:

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

EDIT: Isso parece funcionar,
Obrigado

Eu descobri que a correção do gius80 funcionou, mas diminuiu um pouco o desempenho em tablets.

Em vez disso, adicionei um retorno de chamada panzoom onEnd que aumenta levemente o zoom depois que o usuário conclui sua ação. Isso parece fazer com que o panzoom seja renderizado novamente sem borrar. Tenho certeza de que existe uma maneira melhor de chegar à raiz do problema, mas essa solução parece funcionar no desktop Chrome e no Android, pelo menos.

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

Este é um catch-22. O problema do webkit é bem explicado neste artigo . Panzoom está usando -webkit-backface-visibility: hidden para promover o elemento em sua própria camada composta para tirar vantagem da aceleração de hardware. Isso melhorou o desempenho das animações em todos os dispositivos. Dito isso, o webkit não anima camadas aceleradas por hardware sem borrar quando qualquer parte da animação cai em meio pixel. O Panzoom não pode fornecer uma solução confiável e universal para isso.

Portanto, a questão é: queremos animações mais rápidas que às vezes ficam borradas no webkit até que o webkit resolva o problema, ou queremos descartar a aceleração de hardware?

BTW, mesmo que o Panzoom não force a camada separada, isso acontecerá às vezes de qualquer maneira. O Webkit criará automaticamente camadas separadas sob certas circunstâncias (por exemplo, opacidade de animação).

"quando qualquer parte da animação cai em meio pixel"
Talvez o nível de zoom possa ser forçado para pixels completos com Math.floor ou Math.ceil?

Não é o nível de zoom. Pelo artigo, parece que as dimensões do elemento devem começar divisíveis por 2, o que não é apropriado para o Panzoom aplicar (especialmente em páginas responsivas).

O desfoque corrigido é o comentário lin 821 // 'backface-visibility': 'hidden',

gius80 seu truque funciona, muito obrigado.

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

Estou trabalhando em um problema relacionado em que a renderização inicial de uma imagem em escala reduzida fica extremamente pixelada quando o zoom panorâmico está ativado. Isso não ocorre no Firefox, mas ocorre no Chrome e no IE. Ao aplicar a sugestão de @ gius80, ela renderiza corretamente no Chrome. Ainda testando o IE e falhando pelo menos no IE9. Obrigado por me trazer um passo mais perto!

@ jdonahue82 também funciona para você no Safari? Nenhuma solução funciona no Safari para mim.

@marcelboettcher eu concordo. Nenhuma das soluções está funcionando para o Safari

De acordo com minha experiência com uma implementação de zoom personalizado (não jquery.panzoom):

O Mobile Safari e o Chrome ficam embaçados quando você tem vários elementos usando a transformação CSS sobreposta a outro usando a posição CSS.

Eu acho que este é um problema geral com várias camadas que são aceleradas por hardware.

Talvez isso seja útil para resolver o problema.

Encontrou outra solução alternativa!

Você pode forçar um redesenho usando este código em panzoomzoom.

Isso é o mesmo que visibilidade da face posterior: inicial, porém, super lento. Assim, você pode eliminar a função em 100 ms. Usei lodash para isso, mas você pode depurar manualmente.

Aqui está o código:

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

Espero que isto ajude :)