Panzoom: يعد Zoom-in ضبابيًا في المتصفحات القائمة على webkit

لا يمكن إصلاح هذا عن طريق panzoom. إنها مشكلة webkit

لا يبدو أن SVGPan الغريب لديه هذه المشكلة: http://www.cyberz.org/projects/SVGPan/tiger.svg

لقد تحققت مرتين ولم يتم إجراء panzoom إذا كان الإعداد يتحول على عنصر مجموعة في SVG.

مرحبا يا شباب
لقد كنت أستخدم panzoom منذ الأمس وما زلت أتحقق من مصممنا إذا كان SVG هو السبيل للتعامل مع مهمتنا الحالية. أرغب في استخدام panzoom لتكبير أجزاء مختلفة من صورة SVG ، لكن في Chrome تصبح ضبابية ، كما تناقشكم هنا يا رفاق. هل يمكنني فعل أي شيء حيال ذلك؟ timmywil تكتب أن "الإعداد يتحول على عنصر مجموعة في SVG" يجب أن يساعد ، ولكن كيف أفعل ذلك؟ سيكون موضع تقدير أي مساعدة.
هذا هو جزء الكود الذي أستخدمه:

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

و html الخاص بي هو:

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

العثور على حل بديل. أقلب بين -webkit-منظور 1 و 0 في كل panzoomzoom.

أفعل شيئًا كهذا:
علم var = صحيح ؛
وظيفة doThisOnEveryPanzoomzoom () {
$ ('# mypanzoom'). css ({
"-منظور الويب": (علم؟ 1: 0)
}) ؛
العلم =!
}

tlimited خدعة مثيرة للاهتمام. سأبحث في هذا.

v1.12.4 هو آخر إصدار يعمل مع Chrome لسطح المكتب والجوال. ستعمل الإصدارات الأحدث على ios safari و ios chrome فقط.

سيعمل الحل البديل بواسطة tlimited على سطح المكتب chrome وليس على الهاتف المحمول. لقد لاحظت أنه في سطح المكتب chrome عندما تكون الصورة ضبابية ، إذا كنت تستخدم chrome inspector وقمت بتمييز أي عنصر على الصفحة ، فإن الصورة تصبح حادة مرة أخرى. مشكلة إعادة الطلاء؟ (هذا التغيير المنظور يؤدي إلى إعادة الرسم ، أفترض)

لقد وجدت خدعة تعمل أيضًا على الهاتف المحمول بالنسبة لي (متصفح Chrome ومتصفح android الأصلي).
فقط ضع هذه الأسطر في المغلق:

.panzoom {
-webkit-backface-visibility: أولي! مهم ؛
أصل تحويل مجموعة الويب: 50٪ 50٪ ؛
}

تحرير: يبدو أن هذا يعمل ،
شكرا

لقد وجدت أن إصلاح gius80 نجح ، لكنه أدى إلى إبطاء الأداء على الأجهزة اللوحية قليلاً.

بدلاً من ذلك ، أضفت رد اتصال panzoom onEnd الذي يتم تكبيره قليلاً بعد أن ينتهي المستخدم من الإجراء. يبدو أن هذا يتسبب في إعادة عرض panzoom بدون تشويش. أنا متأكد من أن هناك طريقة أفضل للوصول إلى جذر المشكلة ، ولكن يبدو أن هذا الحل يعمل على سطح مكتب Chrome و Android على الأقل.

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

هذا هو الالتقاط 22. تم شرح مشكلة webkit جيدًا في هذه المقالة . تستخدم Panzoom -webkit-backface-visibility: hidden لترقية العنصر إلى الطبقة المركبة الخاصة به للاستفادة من تسريع الأجهزة. أدى ذلك إلى تحسين أداء الرسوم المتحركة عبر الأجهزة. ومع ذلك ، فإن webkit لا يقوم بتحريك الطبقات التي يتم تسريعها بالأجهزة دون التعتيم عندما يحدث سقوط أي جزء من الرسوم المتحركة على نصف بكسل. لا تستطيع Panzoom توفير حل شامل وموثوق لهذا الأمر.

لذا ، السؤال هو ، هل نريد رسومًا متحركة أسرع تكون أحيانًا ضبابية في webkit حتى تعالج webkit المشكلة ، أو هل نريد إسقاط تسريع الأجهزة؟

راجع للشغل ، حتى لو لم يفرض Panzoom الطبقة المنفصلة ، فسيحدث ذلك في بعض الأحيان على أي حال. سيقوم Webkit تلقائيًا بإنشاء طبقات منفصلة في ظل ظروف معينة (مثل تحريك العتامة).

"عندما يقع أي جزء من الرسوم المتحركة على نصف بكسل"
ربما يمكن إجبار مستوى التكبير / التصغير على وحدات البكسل الكاملة باستخدام Math.floor أو Math.ceil؟

إنه ليس مستوى التكبير. من المقالة ، يبدو أن أبعاد العنصر يجب أن تبدأ قابلة للقسمة على 2 ، وهو أمر غير مناسب لتطبيق Panzoom (خاصة على الصفحات سريعة الاستجابة).

تم إصلاح تعتيم التعليق لين 821 // "backface-visibility": "hidden" ،

gius80 خدعتك تعمل ، شكرًا جزيلاً.

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

أنا أعمل على مشكلة ذات صلة حيث يتم تقطيع العرض الأولي للصورة المصغرة للغاية عند تمكين panzoom. لا يحدث هذا في Firefox ، ولكنه يحدث في Chrome و IE. عند تطبيق الاقتراح من @ gius80 ، يتم عرضه بشكل صحيح في Chrome. لا يزال اختبار IE والفشل على الأقل في IE9. شكرا لتقريبني خطوة واحدة!

@ jdonahue82 هل يعمل معك في Safari أيضًا؟ لا توجد حلول تعمل في Safari بالنسبة لي.

marcelboettcher أوافق. لا يعمل أي من الحلول مع Safari

وفقًا لتجربتي مع تطبيق التكبير / التصغير المخصص (وليس jquery.panzoom):

يصبح Mobile Safari و Chrome ضبابيين بمجرد أن يكون لديك عناصر متعددة باستخدام تحويل CSS فوق عنصر آخر باستخدام موضع CSS.

أعتقد أن هذه مشكلة عامة مع طبقات متعددة يتم تسريع الأجهزة.

ربما يكون هذا مفيدًا في حل المشكلة.

تم العثور على حل بديل آخر!

يمكنك فرض إعادة رسم باستخدام هذا الرمز على panzoomzoom.

هذا هو نفس الرؤية الخلفية: الأولية ، مع ذلك ، بطيئة للغاية. حتى تتمكن من خصم الوظيفة بمقدار 100 مللي ثانية. لقد استخدمتُ لوداش لهذا الغرض ، لكن يمكنك الرفض يدويًا.

ها هو الكود:

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

أتمنى أن يساعدك هذا :)