Panzoom: Zoom-in ist in Webkit-basierten Browsern verschwommen

Dies kann nicht durch Panzoom behoben werden. Es ist ein Webkit-Problem

Seltsames SVGPan scheint dieses Problem nicht zu haben: http://www.cyberz.org/projects/SVGPan/tiger.svg

Ich habe es noch einmal überprüft und Panzoom funktioniert auch nicht, wenn die Einstellung von Transformationen für ein Gruppenelement in SVG vorgenommen wird.

Hallo Leute
Ich benutze Panzoom seit gestern und frage immer noch mit unserem Designer, ob SVG der Weg ist, unsere aktuelle Aufgabe zu bewältigen. Ich würde gerne Panzoom verwenden, um verschiedene Teile des SVG-Bildes zu vergrößern, aber in Chrome wird es verschwommen, wie Sie hier besprechen. Kann ich etwas dagegen tun? @timmywil Sie schreiben, dass "das Setzen von Transformationen für ein Gruppenelement in SVG" helfen sollte, aber wie mache ich es? Jede Hilfe wäre dankbar.
Hier ist der Code, den ich verwende:

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

und mein html ist:

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

Habe eine Problemumgehung gefunden. Ich wechsele bei jedem Panzoomzoom zwischen -webkit-perspective 1 und 0.

Ich mache so etwas:
var-Flag = wahr;
Funktion doThisOnEveryPanzoomzoom(){
$('#mypanzoom').css({
'-webkit-perspektive': (Flag?1:0)
});
Flagge = ! Flagge;
}

@tlimited Interessanter Trick. Ich werde das prüfen.

v1.12.4 ist die letzte funktionierende Version mit Chrome Desktop und Mobile. Neuere Versionen funktionieren nur auf iOS Safari und iOS Chrome.

Workaround von tlimited funktioniert auf Desktop-Chrome, aber nicht auf Mobilgeräten. Mir ist aufgefallen, dass das Bild in Desktop-Chrome wieder scharf wird, wenn das Bild verschwommen ist, wenn Sie den Chrome-Inspektor verwenden und ein Element auf der Seite hervorheben. Problem neu lackieren? (dass eine perspektive Änderung ein Repaint auslöst, nehme ich an)

Ich habe einen Trick gefunden, der bei mir auch auf dem Handy funktioniert (Chrome und nativer Android-Browser).
Einfach diese Zeilen in css einfügen:

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

EDIT: Das scheint zu funktionieren,
Danke

Ich fand, dass der Fix von gius80 funktionierte, aber die Leistung auf Tablets ziemlich verlangsamte.

Stattdessen habe ich einen Panzoom onEnd-Callback hinzugefügt, der ganz leicht heranzoomt, nachdem der Benutzer seine Aktion beendet hat. Dies scheint dazu zu führen, dass Panzoom ohne Unschärfe neu gerendert wird. Ich bin mir sicher, dass es einen besseren Weg gibt, um an die Wurzel des Problems zu gelangen, aber diese Lösung scheint zumindest auf Chrome-Desktop und Android zu funktionieren.

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

Dies ist ein Fang-22. Das Webkit-Problem wird in diesem Artikel gut erklärt. Panzoom verwendet -webkit-backface-visibility: hidden , um das Element auf seine eigene zusammengesetzte Ebene hochzustufen, um die Hardwarebeschleunigung zu nutzen. Dadurch wurde die Leistung von Animationen auf allen Geräten verbessert. Das heißt, Webkit animiert keine hardwarebeschleunigten Ebenen ohne zu verwischen, wenn ein Teil der Animation auf ein halbes Pixel fällt. Panzoom kann hierfür keine zuverlässige, universelle Lösung bereitstellen.

Die Frage ist also, wollen wir schnellere Animationen, die im Webkit manchmal verschwommen sind, bis das Webkit das Problem behebt, oder wollen wir die Hardwarebeschleunigung weglassen?

Übrigens, auch wenn Panzoom die separate Ebene nicht erzwingt, wird es trotzdem manchmal passieren. Webkit erstellt unter bestimmten Umständen automatisch separate Ebenen (zB animierende Deckkraft).

"wenn ein Teil der Animation auf ein halbes Pixel fällt"
Vielleicht kann die Zoomstufe mit Math.floor oder Math.ceil auf volle Pixel gezwungen werden?

Es ist nicht die Zoomstufe. Aus dem Artikel geht hervor, dass die Elementdimensionen durch 2 teilbar sein müssen, was für Panzoom nicht geeignet ist, um es durchzusetzen (insbesondere auf responsiven Seiten).

Unschärfe behoben Kommentar lin 821 //'backface-visibility': 'hidden',

gius80 dein trick funktioniert, vielen dank.

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

Ich arbeite an einem verwandten Problem, bei dem das anfängliche Rendering eines herunterskalierten Bildes extrem pixelig wird, wenn Panzoom aktiviert ist. Dies tritt in Firefox nicht auf, aber in Chrome und IE. Wenn der Vorschlag von @gius80 angewendet wird , wird er in Chrome korrekt

@jdonahue82 funktioniert es bei dir auch in Safari? Keine Lösung funktioniert in Safari für mich.

@marcelboettcher Ich stimme zu. Keine der Lösungen funktioniert für Safari

Nach meiner Erfahrung mit einer benutzerdefinierten Zoom-Implementierung (nicht jquery.panzoom):

Mobile Safari und Chrome werden verschwommen, wenn Sie mehrere Elemente mit CSS-Transformation haben, die über eine andere mit CSS-Position gelegt werden.

Ich denke, dies ist ein allgemeines Problem mit mehreren Schichten, die die Hardware beschleunigen.

Vielleicht ist das hilfreich, um das Problem zu lösen.

Habe einen anderen Workaround gefunden!

Sie können ein Neuzeichnen mit diesem Code auf panzoomzoom erzwingen.

Dies ist dasselbe wie die Sichtbarkeit der Rückseite: anfänglich jedoch superlangsam. So können Sie die Funktion um 100ms entprellen. Ich habe dafür Lodash verwendet, aber Sie können manuell entprellen.

Hier ist der Code:

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

Hoffe das hilft :)