Panzoom: El zoom es borroso en los navegadores basados ​​en webkit

Panzoom no puede solucionar este problema. Es un problema de webkit

Weird SVGPan no parece tener este problema: http://www.cyberz.org/projects/SVGPan/tiger.svg

Verifiqué dos veces y tampoco panzoom si la configuración se transforma en un elemento de grupo en SVG.

Hola chicos
He estado usando panzoom desde ayer y todavía estoy comprobando con nuestro diseñador si SVG es la forma de manejar nuestra tarea actual. Me gustaría usar panzoom para hacer zoom en diferentes partes de la imagen SVG, pero en Chrome se vuelve borrosa, como ustedes comentan aquí. ¿Puedo hacer algo al respecto? @timmywil , escribe que "configurar transformaciones en un elemento de grupo en SVG" debería ayudar, pero ¿cómo lo hago? Cualquier ayuda sería apreciada.
Aquí está el fragmento de código que utilizo:

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

y mi html es:

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

Encontré una solución. Cambio entre -webkit-perspectiva 1 y 0 en cada panzoomzoom.

Estoy haciendo algo como esto:
var flag = true;
function doThisOnEveryPanzoomzoom () {
$ ('# mypanzoom'). css ({
'-webkit-perspectiva': (bandera? 1: 0)
});
bandera =! bandera;
}

@tlimited Interesante truco. Voy a investigar esto.

v1.12.4 es la última versión que funciona con Chrome para escritorio y dispositivos móviles. Las versiones más recientes solo funcionarán en ios safari y ios chrome.

La solución alternativa de tlimited funcionará en Chrome de escritorio, pero no en dispositivos móviles. Noté que en el escritorio de Chrome, cuando la imagen está borrosa, si usa el inspector de Chrome y resalta cualquier elemento en la página, la imagen se vuelve nítida nuevamente. ¿Problema de repintado? (que el cambio de perspectiva desencadena el repintado, supongo)

Encontré un truco que también funciona en dispositivos móviles para mí (Chrome y navegador nativo de Android).
Simplemente ponga estas líneas en css:

.panzoom {
-webkit-backface-visibilidad: inicial! importante;
-webkit-transform-origin: 50% 50%;
}

EDITAR: Esto parece funcionar,
Gracias

Descubrí que la solución del gius80 funcionaba, pero que ralentizaba bastante el rendimiento en tabletas.

En su lugar, agregué una devolución de llamada panzoom onEnd que se acerca ligeramente después de que el usuario ha terminado su acción. Esto parece hacer que panzoom se vuelva a renderizar sin borrosidad. Estoy seguro de que hay una mejor manera de llegar a la raíz del problema, pero esta solución parece funcionar en el escritorio de Chrome y al menos en Android.

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

Esta es una trampa 22. El problema del webkit se explica bien en este artículo . Panzoom está usando -webkit-backface-visibility: hidden para promover el elemento a su propia capa compuesta para aprovechar la aceleración del hardware. Esto ha mejorado el rendimiento de las animaciones en todos los dispositivos. Dicho esto, webkit no anima capas aceleradas por hardware sin desenfocar cuando cualquier parte de la animación cae en medio píxel. Panzoom no puede proporcionar una solución universal confiable para esto.

Entonces, la pregunta es, ¿queremos animaciones más rápidas que a veces están borrosas en webkit hasta que webkit resuelva el problema, o queremos eliminar la aceleración de hardware?

Por cierto, incluso si Panzoom no fuerza la capa separada, sucederá a veces de todos modos. Webkit creará automáticamente capas separadas bajo ciertas circunstancias (por ejemplo, animando la opacidad).

"cuando cualquier parte de la animación cae en medio píxel"
¿Quizás el nivel de zoom se pueda forzar a píxeles completos con Math.floor o Math.ceil?

No es el nivel de zoom. Según el artículo, parece que las dimensiones del elemento deben comenzar divisibles por 2, lo que no es apropiado para que Panzoom lo aplique (especialmente en páginas receptivas).

Se corrigió borroso es el comentario lin 821 // 'visibilidad de la cara posterior': 'oculto',

gius80 tu truco funciona, muchas gracias.

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

Estoy trabajando en un problema relacionado en el que la representación inicial de una imagen reducida se pixela mucho cuando se habilita el zoom panorámico. Esto no ocurre en Firefox, pero ocurre en Chrome e IE. Al aplicar la sugerencia de @ gius80, se procesa correctamente en Chrome. Todavía probando IE y fallando al menos en IE9. ¡Gracias por traerme un paso más cerca!

@ jdonahue82, ¿te funciona también en Safari? Ninguna solución funciona en Safari para mí.

@marcelboettcher Estoy de acuerdo. Ninguna de las soluciones funciona para Safari

Según mi experiencia con una implementación de zoom personalizado (no jquery.panzoom):

Mobile Safari y Chrome se vuelven borrosos una vez que tienes varios elementos usando la transformación CSS colocando sobre otro usando la posición CSS.

Supongo que este es un problema general con múltiples capas que aceleran el hardware.

Quizás esto sea útil para resolver el problema.

¡Encontré otra solución!

Puede forzar un redibujo usando este código en panzoomzoom.

Esto es lo mismo que la visibilidad del reverso: inicial, aunque super lento. Entonces puede eliminar el rebote de la función en 100 ms. Usé lodash para esto, pero puedes eliminar el rebote manualmente.

Aquí está el código:

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

Espero que esto ayude :)