iOS pinch zoom no longer works

[MiikaL]

Hi there,

Previous to the iOS 10 update, it was possible to use "pinch zoom" on the visjs Timeline as long as the page had the meta tag . The newest version of iOS Safari no longer respects this meta tag, which has consequently also broken the pinch zoom functionality of the Timeline. Is there a solution for this problem or should I dig deeper?

Ideally, pinch zoom on Timeline AND allowing the user to zoom the page itself would be ideal, for accessibility reasons.

[MiikaL]

The 4.17 update made the zooming work kind of, but it seems like it is zooming the timeline AND the page at the same time. In other words, is there a missing preventDefault/stopPropagation/return false in there somewhere which would make the timeline fully capture the zoom event if it starts within the confines of the timeline?

[mojoaxel]

@MiikaL Thanks for reporting this. Can you recommend an example to test this? I have access to an iPadMini.

[MiikaL]

The issue can be seen on http://visjs.org/examples/timeline/interaction/limitMoveAndZoom.html .

It is a little hard to explain what is happening, as it appears to be behaving a little inconsistently. If you pinch/extend your fingers horizontally, it appears to work (more often than not), as long as you are very careful to stay within the bounds of the timeline element. pinch/extend vertically appears to fail more often, causing the zoom to impact the page rather than the timeline element.

I am testing this on my iPhone, so the screen is small, making it harder to keep my fingers within the timeline element.

Possibly also the limits set by that example are further complicating the issue, almost as if once the limit has been reached then it stops catching the pinch events and lets it bubble up to the page.

TLDR: Pinch/extend repeatedly on example timeline seems to -sometimes- cause the action to be caught by the page rather than the timeline.

[yotamberk]

@MiikaL The problem I see happening is that the pinch/extend stop once the timeline gets to it's maximum/minimum zoom. It has nothing to do with the screen size, but more of what's the zoom level. The event returns and stops the pinch/extend event once reaching on of these min/max zooms making it feel like it's stuck.
This can be fixed quite easily. I'll try getting to it the next few days.

[wansco]

ios10 changed the behavior of the viewport meta tag. Before ios10, you could prevent the user from scaling the screen size, but now (ios10+) pinch to zoom, zooms the screen. I think all that is needed is to cancel the event on the timeline element before it bubbles up. I haven't investigated this too thoroughly, so that might be a naive solution.

[RaekwonStorm]

@wansco I tried putting event.preventDefault(); in the Range.js _onPinch function, and it seemed to help a bit, but it was still very inconsistent. It definitely zooms the screen size more frequently when pinching vertically, but it will still occasionally zoom the screen on horizontal pinch.

[wansco]

Its been a while since I looked at this. I pulled down the latest version and tested it on "/examples/timeline/editing/tooltipOnItemChange.html". _onPinch() didn't have the preventDefault(), but it seemed to be behaving properly. Although, when I scrolled the page and then tried to pinch the timeline while the page was still moving, I got the full page zoom.

It appears that when iOS is easing the end of the page scroll, the subsequent touch events are not passed through the element until the page scroll comes to a complete stop. I'll have to investigate this further to see if that is actually what is happening.

[darthsteven]

I have an application that has this issue, but we also have a leaflet map on the page too, but they don't have this issue. On the leaflet map when pinching to zoom, leaflet does the zooming etc.

[mojoaxel]

@darthsteven Can you please test this in your device with e.g. the Basic Example.

[darthsteven]

@mojoaxel Yes, even the basic example on iOS 10 on iPad does this.

I can get the desired zooming if I move my fingers apart horizontally, but if I move my fingers apart vertically or slightly diagonally, then iOS just zooms the whole page in.

[darthsteven]

@mojoaxel I can confirm that adding:

util.preventDefault(event);

to the Range.prototype._onPinch function seems to work a treat for the pinching. You can still double tap to zoom, and it zooms in rather than firing my bound double click handler, but maybe I need another preventDefault().