Panzoom: Увеличение нечеткое в браузерах на базе Webkit

Это не может быть исправлено с помощью panzoom. Это проблема webkit

У Weird 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 flag = true;
function doThisOnEveryPanzoomzoom () {
$ ('# mypanzoom'). css ({
'-webkit-перспектива': (флаг? 1: 0)
});
flag =! flag;
}

@tlimited Интересный трюк. Я займусь этим.

v1.12.4 - последняя рабочая версия с настольными и мобильными устройствами Chrome. Более новые версии будут работать только с ios safari и ios chrome.

Временное решение от tlimited будет работать на настольном Chrome, но не на мобильном устройстве. Я заметил, что в Chrome для рабочего стола, когда изображение размыто, если вы используете Chrome Inspector и выделяете любой элемент на странице, изображение снова становится резким. Проблема с перекрашиванием? (это предполагаемое изменение вызывает перерисовку, я полагаю)

Я нашел уловку, которая работает и на мобильных устройствах (Chrome и собственный браузер Android).
Просто поместите эти строки в css:

.panzoom {
-webkit-backface-visibility: начальный! важно;
-webkit-transform-origin: 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 (особенно на адаптивных страницах).

Исправлено размытие комментария lin 821 // 'backface-visibility': 'hidden',

gius80 твой трюк работает, спасибо большое.

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

Я работаю над связанной проблемой, когда первоначальный рендеринг уменьшенного изображения становится чрезвычайно пиксельным при включении панорамирования. Этого не происходит в Firefox, но происходит в Chrome и IE. При применении предложения от @ gius80 оно корректно отображается в Chrome. Все еще тестирую IE и терпит неудачу, по крайней мере, в IE9. Спасибо, что приблизили меня на шаг!

@ jdonahue82 у вас тоже работает в Safari? У меня в Safari не работают никакие решения.

@marcelboettcher Согласен. Ни одно из решений не работает для Safari

Согласно моему опыту с реализацией настраиваемого масштабирования (не jquery.panzoom):

Мобильный Safari и Chrome становятся размытыми, если у вас есть несколько элементов, использующих преобразование CSS, накладывающихся друг на друга с использованием позиции CSS.

Я предполагаю, что это общая проблема с несколькими уровнями, которые получают аппаратное ускорение.

Может быть, это поможет решить проблему.

Нашел другой обходной путь!

Вы можете принудительно выполнить перерисовку, используя этот код в panzoomzoom.

Это то же самое, что и backface-visibility: начальная, но очень медленная. Таким образом, вы можете отклонить функцию на 100 мс. Я использовал для этого lodash, но вы можете вручную устранить ошибку.

Вот код:

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

Надеюсь это поможет :)