Panzoom: वेबकिट-आधारित ब्राउज़र में ज़ूम-इन धुंधली है

इसे पैनज़ूम द्वारा ठीक नहीं किया जा सकता है। यह एक वेबकिट मुद्दा है

अजीब SVGPan में यह समस्या नहीं है: http://www.cyberz.org/projects/SVGPan/tiger.svg

एसवीजी में समूह तत्व पर सेटिंग बदलने पर मैंने दोबारा जांच की और न ही पैनज़ूम करता है।

हिया दोस्तों
मैं कल से पैनज़ूम का उपयोग कर रहा हूं और अभी भी हमारे डिजाइनर के साथ जांच कर रहा हूं कि क्या एसवीजी हमारे वर्तमान कार्य को संभालने का तरीका है। मैं एसवीजी छवि के विभिन्न हिस्सों पर ज़ूम करने के लिए पैनज़ूम का उपयोग करना चाहता हूं, लेकिन क्रोम में यह धुंधला हो जाता है, जैसा कि आप लोग यहां चर्चा करते हैं। क्या मैं इसके बारे में कुछ कर सकता हूँ? @timmywil आप लिखते हैं कि "एसवीजी में समूह तत्व पर सेटिंग बदलना" मदद करनी चाहिए, लेकिन मैं इसे कैसे कर सकता हूं? किसी भी सहायता की सराहना की जाएगी।
मेरे द्वारा उपयोग किए जाने वाले कोड का टुकड़ा यहां दिया गया है:

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

और मेरा एचटीएमएल है:

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

एक उपाय मिला। मैं प्रत्येक पैनज़ूम पर -वेबकिट-परिप्रेक्ष्य 1 और 0 के बीच फ़्लिप करता हूं।

मैं कुछ ऐसा कर रहा हूँ:
वर झंडा = सच;
फ़ंक्शन doThisOnEveryPanzoomzoom () {
$('#mypanzoom').css({
'-वेबकिट-परिप्रेक्ष्य': (ध्वज?1:0)
});
झंडा = झंडा;
}

@tlimited दिलचस्प ट्रिक। मैं इस पर गौर करूंगा।

v1.12.4 क्रोम डेस्कटॉप और मोबाइल के साथ अंतिम कार्यशील संस्करण है। नए संस्करण केवल आईओएस सफारी और आईओएस क्रोम पर काम करेंगे।

tlimited द्वारा वर्कअराउंड डेस्कटॉप क्रोम पर काम करेगा लेकिन मोबाइल पर नहीं। मैंने देखा कि डेस्कटॉप क्रोम में जब छवि धुंधली होती है, यदि आप क्रोम इंस्पेक्टर का उपयोग करते हैं और पृष्ठ पर किसी भी तत्व को हाइलाइट करते हैं, तो छवि फिर से तेज हो जाती है। फिर से रंगना समस्या? (वह परिप्रेक्ष्य परिवर्तन फिर से रंगना ट्रिगर करता है, मुझे लगता है)

मुझे एक तरकीब मिली जो मेरे लिए मोबाइल पर भी काम करती है (क्रोम और देशी एंड्रॉइड ब्राउज़र)।
बस इन पंक्तियों को सीएसएस में रखें:

पैनज़ूम {
-वेबकिट-बैकफेस-दृश्यता: प्रारंभिक! महत्वपूर्ण;
-वेबकिट-ट्रांसफॉर्म-ओरिजिनल: 50% 50%;
}

संपादित करें: यह काम करता प्रतीत होता है,
धन्यवाद

मैंने पाया कि gius80 के फिक्स ने काम किया, लेकिन इसने टैबलेट पर प्रदर्शन को काफी धीमा कर दिया।

इसके बजाय, मैंने एक पैनज़ूम ऑनएंड कॉलबैक जोड़ा जो उपयोगकर्ता द्वारा अपनी कार्रवाई समाप्त करने के बाद कभी भी इतना छोटा हो जाता है। ऐसा लगता है कि पैनज़ूम को बिना किसी धुंधलापन के फिर से प्रस्तुत करने का कारण बनता है। मुझे यकीन है कि समस्या की जड़ तक पहुंचने का एक बेहतर तरीका है, लेकिन यह समाधान कम से कम क्रोम डेस्कटॉप और एंड्रॉइड पर काम करता प्रतीत होता है।

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

यह कैच-22 है। इस आलेख में वेबकिट मुद्दे को अच्छी तरह समझाया गया है। Panzoom हार्डवेयर त्वरण का लाभ उठाने के लिए तत्व को अपनी समग्र परत में बढ़ावा देने के लिए -webkit-backface-visibility: hidden का उपयोग कर रहा है। इसने सभी उपकरणों में एनिमेशन के प्रदर्शन में सुधार किया है। उस ने कहा, वेबकिट हार्डवेयर-त्वरित परतों को धुंधला किए बिना एनिमेट नहीं करता है जब एनीमेशन का कोई हिस्सा आधा-पिक्सेल पर गिर जाता है। Panzoom इसके लिए एक विश्वसनीय, सार्वभौमिक समाधान प्रदान नहीं कर सकता है।

तो, सवाल यह है कि, क्या हम तेज़ एनिमेशन चाहते हैं जो कभी-कभी वेबकिट में धुंधले होते हैं जब तक कि वेबकिट समस्या का समाधान नहीं करता है, या क्या हम हार्डवेयर त्वरण को छोड़ना चाहते हैं?

BTW, भले ही Panzoom अलग परत को बाध्य न करे, वैसे भी कभी-कभी ऐसा होगा। कुछ परिस्थितियों में वेबकिट स्वचालित रूप से अलग परतें बनाएगा (उदाहरण के लिए अस्पष्टता को एनिमेट करना)।

"जब एनीमेशन का कोई भी हिस्सा हाफ-पिक्सेल पर गिरता है"
हो सकता है कि ज़ूम स्तर को Math.floor या Math.ceil के साथ पूर्ण पिक्सेल के लिए बाध्य किया जा सकता है?

यह ज़ूम स्तर नहीं है। लेख से, ऐसा लगता है कि तत्व आयामों को 2 से विभाज्य होना चाहिए, जो कि पंज़ूम को लागू करने के लिए उपयुक्त नहीं है (विशेषकर उत्तरदायी पृष्ठों पर)।

फिक्स्ड ब्लरी कमेंट लिन 821 //'बैकफेस-विजिबिलिटी' है: 'हिडन',

gius80 आपकी चाल काम करती है, बहुत बहुत धन्यवाद।

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

मैं एक संबंधित समस्या पर काम कर रहा हूं जहां पैनज़ूम सक्षम होने पर डाउनस्केल की गई छवि का प्रारंभिक प्रतिपादन अत्यधिक पिक्सेलयुक्त हो जाता है। यह फ़ायरफ़ॉक्स में नहीं होता है, लेकिन क्रोम और आईई में होता है। @ Gius80 से सुझाव लागू करते

@ jdonahue82 क्या यह आपके लिए सफारी में भी काम करता है? मेरे लिए सफारी में कोई समाधान काम नहीं करता है।

@marcelboettcher मैं सहमत हूं। कोई भी समाधान सफारी के लिए काम नहीं कर रहा है

एक कस्टम ज़ूम के साथ मेरे अनुभव के अनुसार (jquery.panzoom नहीं) कार्यान्वयन:

मोबाइल सफारी और क्रोम धुंधला हो जाता है जब आपके पास सीएसएस स्थिति का उपयोग करके सीएसएस ट्रांसफॉर्म का उपयोग करके कई तत्व होते हैं।

मुझे लगता है कि यह कई परतों वाला एक सामान्य मुद्दा है जो हार्डवेयर को त्वरित करता है।

शायद यह समस्या को हल करने में मददगार है।

एक और उपाय मिला!

आप पैनज़ूमज़ूम पर इस कोड का उपयोग करके रीड्रा को बाध्य कर सकते हैं।

यह बैकफेस-विजिबिलिटी के समान है: प्रारंभिक, हालांकि, सुपर स्लो। तो आप फंक्शन को 100ms तक डिबेट कर सकते हैं। मैंने इसके लिए लॉश का इस्तेमाल किया, लेकिन आप मैन्युअल रूप से बहस कर सकते हैं।

यहाँ कोड है:

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

उम्मीद है की यह मदद करेगा :)