Panzoom: Le zoom avant est flou dans les navigateurs basés sur des kits Web

Cela ne peut pas être corrigé par panzoom. C'est un problème de kit Web

L'étrange SVGPan ne semble pas avoir ce problème : http://www.cyberz.org/projects/SVGPan/tiger.svg

J'ai revérifié et le panzoom non plus si le paramètre se transforme sur un élément de groupe dans SVG.

Salut les gars
J'utilise panzoom depuis hier et je vérifie toujours avec notre concepteur si SVG est le moyen de gérer notre tâche actuelle. J'aimerais utiliser panzoom pour zoomer sur différentes parties de l'image SVG, mais dans Chrome, cela devient flou, comme vous en discutez ici. Puis-je faire quelque chose? @timmywil, vous écrivez que "définir des transformations sur un élément de groupe dans SVG" devrait vous aider, mais comment le faire ? Toute aide serait appréciée.
Voici le bout de code que j'utilise :

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

et mon html est :

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

J'ai trouvé une solution de contournement. Je bascule entre -webkit-perspective 1 et 0 sur chaque panzoomzoom.

Je fais quelque chose comme ça :
var indicateur = vrai ;
fonction doThisOnEveryPanzoomzoom(){
$('#mypanzoom').css({
'-webkit-perspective' : (indicateur ?1:0)
});
indicateur = !indicateur;
}

@tlimited Truc intéressant. Je vais me renseigner.

v1.12.4 est la dernière version de travail avec Chrome Desktop et Mobile. Les versions plus récentes fonctionneront uniquement sur ios safari et ios chrome.

La solution de contournement de tlimited fonctionnera sur Chrome de bureau mais pas sur mobile. J'ai remarqué que dans le chrome du bureau, lorsque l'image est floue, si vous utilisez l'inspecteur de chrome et mettez en surbrillance un élément de la page, l'image redevient nette. Problème de repeinture ? (ce changement en perspective déclenche repeindre, je suppose)

J'ai trouvé une astuce qui fonctionne aussi sur mobile pour moi (chrome et navigateur android natif).
Il suffit de mettre ces lignes en css :

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

EDIT : ça a l'air de fonctionner,
Merci

J'ai trouvé que le correctif du gius80 fonctionnait, mais qu'il ralentissait considérablement les performances sur les tablettes.

Au lieu de cela, j'ai ajouté un rappel panzoom onEnd qui zoome très légèrement une fois que l'utilisateur a terminé son action. Cela semble provoquer un nouveau rendu de panzoom sans flou. Je suis sûr qu'il existe un meilleur moyen d'aller à la racine du problème, mais cette solution semble fonctionner au moins sur le bureau Chrome et Android.

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

C'est un catch-22. Le problème du webkit est bien expliqué dans cet article . Panzoom utilise -webkit-backface-visibility: hidden pour promouvoir l'élément dans sa propre couche composite afin de tirer parti de l'accélération matérielle. Cela a amélioré les performances des animations sur tous les appareils. Cela dit, webkit n'anime pas les calques à accélération matérielle sans flou lorsqu'une partie de l'animation tombe sur un demi-pixel. Panzoom ne peut pas fournir de solution fiable et universelle pour cela.

Donc, la question est, voulons-nous des animations plus rapides qui sont parfois floues dans webkit jusqu'à ce que webkit résolve le problème, ou voulons-nous abandonner l'accélération matérielle ?

BTW, même si Panzoom ne force pas le calque séparé, cela arrivera parfois de toute façon. Webkit créera automatiquement des calques séparés dans certaines circonstances (par exemple, animation d'opacité).

"quand une partie de l'animation tombe sur un demi-pixel"
Peut-être que le niveau de zoom peut être forcé à des pixels entiers avec Math.floor ou Math.ceil ?

Ce n'est pas le niveau de zoom. D'après l'article, il semble que les dimensions de l'élément doivent commencer par divisible par 2, ce qui n'est pas approprié pour Panzoom à appliquer (en particulier sur les pages réactives).

Le flou fixe est le commentaire lin 821 //'backface-visibility': 'hidden',

gius80 votre astuce fonctionne, merci beaucoup.

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

Je travaille sur un problème connexe où le rendu initial d'une image réduite devient extrêmement pixelisé lorsque le panzoom est activé. Cela ne se produit pas dans Firefox, mais se produit dans Chrome et IE. Lors de l'application de la suggestion de @gius80, elle

@jdonahue82 est-ce que cela fonctionne aussi pour vous dans Safari ? Aucune solution ne fonctionne dans Safari pour moi.

@marcelboettcher Je suis d'accord. Aucune des solutions ne fonctionne pour Safari

D'après mon expérience avec une implémentation de zoom personnalisé (pas jquery.panzoom):

Safari mobile et Chrome deviennent flous une fois que vous avez plusieurs éléments utilisant la transformation CSS superposés à un autre à l'aide de la position CSS.

Je suppose qu'il s'agit d'un problème général avec plusieurs couches dont le matériel est accéléré.

Peut-être que cela est utile pour résoudre le problème.

J'ai trouvé une autre solution de contournement !

Vous pouvez forcer un rafraîchissement en utilisant ce code sur panzoomzoom.

C'est la même chose que la visibilité arrière : initiale, cependant, super lente. Ainsi, vous pouvez anti-rebond de la fonction de 100 ms. J'ai utilisé du lodash pour cela, mais vous pouvez le faire manuellement.

Voici le code :

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

J'espère que cela t'aides :)