Panzoom: 웹킷 기반 브라우저에서 확대가 흐릿함

이것은 panzoom으로 해결할 수 없습니다. 웹킷 문제입니다

이상한 SVGPan에는 이 문제가 없는 것 같습니다: http://www.cyberz.org/projects/SVGPan/tiger.svg

SVG의 그룹 요소에 변환을 설정하는 경우 두 번 확인하고 확대/축소도 수행하지 않습니다.

안녕 얘들아
저는 어제부터 panzoom을 사용해 왔으며 SVG가 현재 작업을 처리하는 방법인지 여전히 디자이너와 확인하고 있습니다. SVG 이미지의 다른 부분을 확대하기 위해 panzoom을 사용하고 싶지만 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>

해결 방법을 찾았습니다. 나는 모든 panzoomzoom에서 -webkit-perspective 1과 0 사이를 뒤집습니다.

나는 이런 일을하고있다 :
var 플래그 = 참;
함수 doThisOnEveryPanzoomzoom(){
$('#mypanzoom').css({
'-webkit-perspective': (플래그?1:0)
});
플래그 = !플래그;
}

@tlimited 흥미로운 트릭. 나는 이것에 대해 조사할 것이다.

v1.12.4는 크롬 데스크톱 및 모바일에서 마지막으로 작동하는 버전입니다. 최신 버전은 iOS 사파리 및 iOS 크롬에서만 작동합니다.

tlimited의 해결 방법은 데스크톱 크롬에서는 작동하지만 모바일에서는 작동하지 않습니다. 데스크탑 크롬에서 이미지가 흐릿할 때 크롬 인스펙터를 사용하고 페이지의 요소를 강조 표시하면 이미지가 다시 선명해지는 것을 알았습니다. 리페인팅 문제? (그 원근법 변경은 다시 그리기를 유발한다고 가정합니다)

모바일에서도 작동하는 트릭을 찾았습니다(크롬 및 기본 Android 브라우저).
다음 줄을 CSS에 넣으십시오.

.팬줌 {
-webkit-backface-visibility: 초기 !중요;
-webkit-transform-origin: 50% 50%;
}

편집 : 이것은 작동하는 것 같습니다.
감사 해요

나는 gius80의 수정 사항이 효과가 있었지만 태블릿의 성능이 상당히 느려졌다는 것을 발견했습니다.

대신 사용자가 작업을 마친 후 약간 확대되는 panzoom onEnd 콜백을 추가했습니다. 이로 인해 팬줌이 흐릿함 없이 다시 렌더링되는 것 같습니다. 문제의 근원에 도달하는 더 좋은 방법이 있다고 확신하지만 이 솔루션은 적어도 Chrome 데스크톱 및 Android에서 작동하는 것 같습니다.

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

이것은 catch-22입니다. 웹킷 문제는 이 기사 에서 잘 설명되어 있습니다. Panzoom은 하드웨어 가속을 활용하기 위해 -webkit-backface-visibility: hidden 를 사용하여 요소를 자체 합성 레이어로 승격합니다. 이를 통해 여러 장치에서 애니메이션 성능이 향상되었습니다. 즉, 웹킷은 애니메이션의 일부가 반픽셀에 떨어질 때 흐리게 처리하지 않고 하드웨어 가속 레이어에 애니메이션을 적용하지 않습니다. Panzoom은 이에 대한 안정적이고 보편적인 수정 사항을 제공할 수 없습니다.

따라서 문제는 웹킷이 문제를 해결할 때까지 웹킷에서 때때로 흐릿한 더 빠른 애니메이션을 원합니까, 아니면 하드웨어 가속을 중단하고 싶습니까?

BTW, Panzoom이 별도의 레이어를 강제하지 않더라도 어쨌든 가끔 발생합니다. Webkit은 특정 상황(예: 불투명도 애니메이션)에서 별도의 레이어를 자동으로 생성합니다.

"애니메이션의 일부가 0.5픽셀에 떨어지는 경우"
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 아님) 구현에 대한 내 경험에 따르면:

CSS 위치를 사용하여 다른 요소 위에 CSS 변환을 사용하는 여러 요소가 있으면 모바일 Safari 및 Chrome이 흐릿해집니다.

하드웨어 가속을 사용하는 여러 계층의 일반적인 문제인 것 같습니다.

아마도 이것은 문제를 해결하는 데 도움이 될 것입니다.

다른 해결 방법을 찾았습니다!

Panzoom에서 이 코드를 사용하여 강제로 다시 그릴 수 있습니다.

이것은 뒷면 가시성과 동일합니다. 초기이지만 매우 느립니다. 따라서 함수를 100ms로 디바운스할 수 있습니다. 이를 위해 lodash를 사용했지만 수동으로 디바운스할 수 있습니다.

코드는 다음과 같습니다.

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

도움이 되었기를 바랍니다 :)