Touch outside map messes up zooming/panning on WP8

[bonnojold]

Device: Windows Phone 8 Openlayers version : 2.13.1

Issue also exists on: http://openlayers.org/dev/examples/mobile.html http://openlayers.org/dev/examples/mobile-jq.html#mappage

Panning/Zooming works fine until I go outside the map (move off the screen with my finger), that mouse position stays registered. The result of this is when I want to pan the map (drag it with 1 finger) it starts to zoom. Somehow it thinks there is still a finger holding a spot outside the map (even outside the phone screen). As far as I can tell this only works on the bottom/top of the phone, the sides are not bugged (X-axis works, Y-axis is bugged).

I tested further and reduced the div size, it looks like there is a tiny border outside the map, all events on this border are registered but never cleared.

[RendyO]

Hello, Any progress with this issue? I have this problem too... when i move fingers outside during zoom or pan, last position of finger is hold after... and it happends only in Y axis. Same behavior is in WebBrowser control in xaml... Ondrej

[metteo]

I can confirm the issue.

OpenLayers 2.13.1 Nokia Lumia 620 with WP 8.1

Issue clearly visible on: http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/mobile-wmts-vienna.html

When panning map to the bottom beyond map area (so the finger ends up on IE address bar)

EDIT: After playing a little more I noticed that the issue doesn't happen when the finger moves below the map and goes back. Only if it goes below / above and after that stops touching the screen.

EDIT2: During debugging OpenLayers.Handler.Drag and Pinch I discovered that when the finger ends the touch outside of map area touchmove methods start to get touch events with 2 touches.

EDIT3: The issues happens because OL translation layer between MSPointer* events and touch events in OpenLayers.Events doesn't handle case when pointer leaves the element and doesn't come back - in such case pointerup event is not fired so the pointer event gets stuck in _msTouches array.

EDIT4: On WP8.0 it's even worse because there is no leave/enter events, so the impl would have to listen for over/out.

[tkdejong]

OpenLayers: 2.14 dev Device: Windows 8 tablet

I just encountered the same problem, and I think I found the fix.

It seems that metteo is correct with his EDIT3 comment in that the issue lies in the MSPointer* events handling by OpenLayers.Events. Specifically, the problem lies in the addMsTouchListenerStart method of OpenLayers.Events. In this function, MSPointerOut is bound to the internalCb function. internalCb only removes the touch if it satisfies the following two checks:

if (this.clientWidth != 0 && this.clientHeight != 0) { if ((Math.ceil(e.clientX) >= this.clientWidth || Math.ceil(e.clientY) >= this.clientHeight)) { touches.splice(i, 1); } }

I'm not sure about the first if-statement (why does a no-size element have pointer events?), but the second if statement seems to be causing the problem for me. You should probably expand it to also remove the touch if the e.clientX < 0 or the e.clientY < 0, to prevent moving off the top or left side.

In our case, we sometimes have an html element on top of the map on the left side, so in that case the e.clientX < 300 (the element's width) but not < 0. I chose to remove the second if-statement altogether, and for now it all seems to work fine.

I'm not sure why the statement was added, and if removing it can cause other bugs, so please keep that in mind when trying this fix.

[metteo]

@tkdejong My findings apply to ol 2.13.1.

2.14 dev was updated in this commit https://github.com/openlayers/openlayers/commit/ec348da963d9b3537090dab87e607e872db4b0cd which points to #1290