Panzoom: Масштабирование пальцем сломано в Chrome v55.02883.91 на мобильных устройствах

Созданный на 12 дек. 2016  ·  20Комментарии  ·  Источник: timmywil/panzoom

Тема выпуска

Масштабирование пальцем сломано в Chrome v55.02883.91 на мобильных устройствах и Android System WebView v55.02883.91
Это относится к мобильным устройствам Android, использующим приложения Chrome (браузер) и Cordova, использующие Android System WebView.

Ваше окружение

  • jquery.panzoom.min.js 3.2.2
  • jquery-1.11.1.min.js (для моих приложений Cordova), однако демонстрационный веб-сайт также не работает.
  • Хром сломан (см. Версию выше). По-прежнему работает через "Интернет" в качестве браузера на телефонах Samsung.

Действия по воспроизведению

  1. Получите Samsung Galaxy S6 Edge + (или аналогичный)
  2. Обновите Chrome и / или Android System WebView до версии 55 и т. Д.
  3. Загрузить на демонстрационной странице
  4. попробуйте и увеличьте масштаб тигра - она ​​сломала товарища!

Ожидаемое поведение

В предыдущей версии Chrome (вплоть до v54) работал отлично, т.е. с увеличением!

Фактическое поведение

То, что происходит на v55, - это все, что вы получаете, это панорамирование, а не масштабирование, а панорамированное изображение иногда «прыгает» между сжатыми пальцами и создает эффект мигания, когда изображение переворачивается между двумя пальцами.

Самый полезный комментарий

Быстро взломал код и закомментировал строку 1164:

this.panning = true;
снова позволяет увеличивать масштаб изображения (и не влияет на панорамирование). Я не вижу, где this.panning получает значение false, кроме как при инициализации ... YMMV.

Все 20 Комментарий

Спасибо, что сообщили об этой проблеме. В один момент мое приложение перестало работать с масштабированием, и я не знаю почему.

Мое приложение тоже сломалось. Странное поведение на недавно обновленном Chrome (события перетаскивания, кажется, прокручивают окно, а события защемления ... странные). Другое устройство с необновленным хромом работает нормально. Прошлой ночью обновил хром, и он тоже сломался.

Спасибо, что открыли этот выпуск.
По этой причине мое приложение перестает работать и на рабочем столе Chrome.

Решение - добавить
touch-action: none;
в css вашего контейнера panzoom, и браузер не будет выполнять свои собственные события касания для этого компонента.

Это новинка: https://developers.google.com/web/updates/2016/10/pointer-events

Решение - добавить
сенсорное действие: нет;
в css вашего контейнера panzoom, и браузер не будет выполнять свои собственные события касания для этого компонента.

Это новинка: https://developers.google.com/web/updates/2016/10/pointer-events

Не работает.

Быстро взломал код и закомментировал строку 1164:

this.panning = true;
снова позволяет увеличивать масштаб изображения (и не влияет на панорамирование). Я не вижу, где this.panning получает значение false, кроме как при инициализации ... YMMV.

Быстро взломал код и закомментировал строку 1164:
this.panning = true;
снова позволяет увеличивать масштаб изображения (и не влияет на панорамирование). Я не вижу, где this.panning получает значение false, кроме как при инициализации ... YMMV.

Спасибо, у меня работает!

Быстро взломал код и закомментировал строку 1164:
this.panning = true;

Вот оно что ...

Этот «взлом» делает свое дело! Теперь работает на android 55

Повторно протестировано на iOS 10.2, Android 53 - по-прежнему работает!

Спасибо vrtual!

Быстро взломал код и закомментировал строку 1164:
this.panning = true;
снова позволяет увеличивать масштаб изображения (и не влияет на панорамирование). Я не вижу, где this.panning получает значение> false, кроме инициализации ... YMMV.

У меня отлично работает ... спасибо, чувак
Я делаю свою функцию масштабирования, но пока это меня спасает ... спасибо

Протестировано на android google webview 2016, обновление 14 декабря ...

Быстро взломал код и закомментировал строку 1164:
this.panning = true;

Частично это работает. Спасибо!

У меня есть частичный успех при прокомментировании этой строки, теперь масштаб увеличивается от левого верхнего угла, а не от места взаимодействия, но это огромное улучшение.

Похоже, что последний хром изменился, где ссылки pageX и pageY находятся в событии.
Вплоть до этого изменения chrome во всех браузерах он был в event.pageX ....
Теперь он находится в event.originalEvent.pageX ...

Я наполовину проработал код panzoom. Чтобы заставить его работать с Chrome с помощью событий мыши, измените эти строки:
строка 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;" исправляет это, но теперь это не так гладко, и на старых устройствах масштабирование становится довольно медленным. Я предполагаю, что его комментирование требует гораздо большей мощности процессора, и поэтому более старые устройства не могут справиться с этим.

Вы пробовали обновиться до новой версии (3.2.2) и закомментировать данную строку?

Я могу подтвердить, что эта ошибка все еще существует (и исправление работает) в версии 3.2.2 и Chrome 56.

Я не уверен на 100%, но вот в чем проблема:
Эта переменная ( this.panning ), похоже, предназначена для предотвращения одновременного запуска более одного экземпляра функции _startMove . Он должен быть сброшен до false в событии endEvent (строка 1249), но я предполагаю, что это не работает должным образом (я не вникнул достаточно глубоко, чтобы выяснить, почему). Возможно, именно поэтому ТорКонсалес обнаружил, что исправление снижает производительность.

Альтернативное исправление: я обнаружил, что добавление this.panning = false; в конец функции _startMove (после строки 1255) также решает эту проблему. Я не тестировал на старых устройствах, поэтому не могу подтвердить, помогает ли это с потерей производительности, но если бы кто-то другой мог, я был бы признателен.

спасибо @JamesCatt попробует вашу альтернативу.

@timmywil !?

@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.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги