Panzoom: 모바일의 Chrome v55.02883.91에서 핀치 줌이 깨짐

이 문제를 신고해 주셔서 감사합니다. 한 순간에 내 앱이 확대/축소 작업을 중지하고 이유를 모르겠습니다.

내 앱도 고장났습니다. 새로 업데이트된 크롬에서 이상한 동작(드래그 이벤트가 창을 스크롤하는 것처럼 보이고 핀치 이벤트가... 기괴함). 업데이트되지 않은 크롬이 있는 다른 기기는 정상적으로 작동합니다. 어젯밤에 크롬을 업데이트했는데 그것도 깨졌습니다.

이 문제를 열어 주셔서 감사합니다.
이러한 이유로 내 앱이 Chrome 데스크톱에서도 작동을 멈춥니다.

솔루션 - 추가
touch-action: none;
panzoom 컨테이너의 CSS에 추가하고 브라우저는 해당 구성 요소에 대해 자체 터치 이벤트를 수행하지 않습니다.

새로운 기능입니다: https://developers.google.com/web/updates/2016/10/pointer-events

솔루션 - 추가
터치 액션: 없음;
panzoom 컨테이너의 CSS에 추가하고 브라우저는 해당 구성 요소에 대해 자체 터치 이벤트를 수행하지 않습니다.

새로운 기능입니다: https://developers.google.com/web/updates/2016/10/pointer-events

작동 안함.

코드를 빠르게 해킹하고 1164행을 주석 처리했습니다.

this.panning = true;
핀치 줌을 다시 허용합니다(패닝에 영향을 주지 않음). 초기화를 제외하고 this.panning이 false로 설정되는 위치를 알 수 없습니다... YMMV.

코드를 빠르게 해킹하고 1164행을 주석 처리했습니다.
this.panning = 사실;
핀치 줌을 다시 허용합니다(패닝에 영향을 주지 않음). 초기화를 제외하고 this.panning이 false로 설정되는 위치를 알 수 없습니다... YMMV.

감사합니다.

코드를 빠르게 해킹하고 1164행을 주석 처리했습니다.
this.panning = 사실;

헐 거기.....

이 '해킹'이 트릭을 수행합니다! 이제 Android 55에서 작동합니다.

iOS 10.2, Android 53에서 다시 테스트 - 여전히 이전과 같이 작동합니다!

vrtual 감사합니다!

코드를 빠르게 해킹하고 1164행을 주석 처리했습니다.
this.panning = 사실;
핀치 줌을 다시 허용합니다(패닝에 영향을 주지 않음). this.panning이 초기화를 제외하고는 >false로 설정되는 위치를 알 수 없습니다... YMMV.

나를 위해 잘 작동합니다 ... 감사합니다.
나만의 확대/축소 기능을 하고 있지만 지금은 저장이 됩니다... 감사합니다.

Android google webview 2016 12월 14일 업데이트에서 테스트...

코드를 빠르게 해킹하고 1164행을 주석 처리했습니다.
this.panning = 사실;

이것은 부분적으로 작동합니다. 감사 해요!

해당 줄을 주석 처리하는 데 부분적으로 성공했습니다. 이제 상호 작용 위치 대신 왼쪽 상단에서 확대/축소되지만 큰 개선 사항입니다.

최신 크롬이 이벤트에서 pageX 및 pageY 참조가 있는 위치를 변경한 것으로 보입니다.
크롬이 변경될 때까지 모든 브라우저에는 event.pageX가 있었습니다....
이제 event.originalEvent.pageX에 있습니다...

Panzoom 코드를 살펴보는 중입니다. 마우스 이벤트를 사용하여 크롬에서 작동하게 하려면 다음 행을 변경하십시오.
라인 1191:1192
변경:
startPageX = event.pageX; startPageY = event.pageY;
에게:
if (typeof event.pageX === 'undefined'){ startPageX = event.originalEvent.pageX; startPageY = event.originalEvent.pageY; }else{ startPageX = event.pageX; startPageY = event.pageY; }
1232행에서 다음을 추가합니다.
if (typeof coords.pageX === 'undefined'){ coords['pageX'] = coords.originalEvent.pageX; coords['pageY'] = coords.originalEvent.pageY; }

터치 이벤트는 내가 진행하면서 더 많이 올 것입니다.

"this.panning = true;" 주석 처리 수정하지만 더 이상 그렇게 매끄럽지 않으며 구형 장치에서는 확대/축소가 상당히 지연됩니다. 나는 그것을 주석 처리하는 것이 훨씬 더 많은 CPU 전력을 사용하므로 오래된 장치가 따라갈 수 없다고 가정합니다.

새 버전(3.2.2)으로 업데이트하고 주어진 줄을 주석 처리해 보셨습니까?

v3.2.2 및 Chrome 56에서 이 버그가 여전히 존재하고 수정 사항이 작동함을 확인할 수 있습니다.

100% 확신할 수는 없지만 문제는 다음과 같습니다.
그 변수( this.panning )는 _startMove 함수의 둘 이상의 인스턴스가 동시에 실행되는 것을 방지하기 위한 것 같습니다. endEvent 이벤트(1249행)에서 false 로 재설정되어야 하지만 이것이 제대로 작동하지 않는 것 같습니다(이유를 알아낼 만큼 충분히 깊이 탐구하지 않았습니다). 이것이 ThorConzales가 수정 사항으로 인해 성능이 저하됨을 발견한 이유일 수 있습니다.

대체 수정: _startMove 함수 끝에 this.panning = false; 를 추가하면(1255행 이후) 이 문제도 해결됩니다. 이전 장치에서 테스트하지 않았으므로 이것이 성능 손실에 도움이되는지 확인할 수는 없지만 다른 사람이 할 수 있다면 감사하겠습니다.

감사합니다 @JamesCatt 는 당신의 대안을 시도할 것입니다.

@티미윌 !?

@JamesCatt 대체 수정이 작동하지 않았고 확대/축소가 다시 중단되었습니다(직접 테스트할 장치가 없기 때문에 사용자가 보고함).

주석 행 1164(this.panning = true)가 작동하지 않습니다. 나는 1143행에서 moveEvent = 'pointermove' tomoveEvent = 'touchmove'로 변경하는 속임수를 썼습니다. 그러면 작동하지만 다른 문제를 일으킬지 확신할 수 없습니다.

이 문제를 해결하는 해킹을 찾았습니다.

초기화 시 options.which 를 -1 로 설정해야 합니다.

$("a.panzoom-elements").panzoom({
  which: -1,
});

__경고__
이 해킹은 터치 장치에서만 작동합니다. 아마도 이것은 마우스에서 작동하지 않을 것입니다.

@JamesCatt 의 대안이 저에게 효과가 없었습니다. @hshiozawa 의 해킹은 적어도 Pixel에서는 Android 7.1.2를 실행합니다.