Access of undefined property when dragging the map in IE11

[fnicollet]

Hi,

I have just been trying leaflet-master (18 Oct 2013) in my project, which is a Windows 8 application, that is running into IE11.

Microsoft unprefixed the "MSPointerXXX" events t more standard pointerxxx events, see "MS vendor prefix removal":
http://msdn.microsoft.com/en-US/library/windows/apps/dn263112.aspx

I saw that there was a commit 14 days ago about this issue:
6e3e0d9

But when i init a simple map and click the map, it crashes. The problem is in
L.DomEvent, at this line:

if (L.Browser.pointer && type.indexOf('touch') === 0) {

here, type is undefined.

Here is the call stack:
addListener [leaflet-src.js] Line 6332
_onDown [leaflet-src.js] Line 6647
handler [leaflet-src.js] Line 6329
cb [leaflet-src.js] Line 7152

Basically, before that, it goes in the "_onDown" function from Draggable.js:
https://github.com/Leaflet/Leaflet/blob/master/src/dom/Draggable.js
Especially at this line:

L.DomEvent
            .on(document, L.Draggable.MOVE[e.type], this._onMove, this)
            .on(document, L.Draggable.END[e.type], this._onUp, this);

The "e.type" is "pointerdown" at this point, so it cannot find it in the static map defined like this:

statics: {
                START: L.Browser.touch ? ['touchstart', 'mousedown'] : ['mousedown'],
                END: {
                        mousedown: 'mouseup',
                        touchstart: 'touchend',
                        MSPointerDown: 'touchend'
                },
                MOVE: {
                        mousedown: 'mousemove',
                        touchstart: 'touchmove',
                        MSPointerDown: 'touchmove'
                }
        },

Adding "pointerdown" to both lists fixes it, from what i tested (dragging the map, dragging markers)

END: {
            mousedown: 'mouseup',
            touchstart: 'touchend',
            pointerdown: 'touchend',
            MSPointerDown: 'touchend'
        },
        MOVE: {
            mousedown: 'mousemove',
            touchstart: 'touchmove',
            pointerdown: 'touchmove',
            MSPointerDown: 'touchmove'
        }

Fabien

[danzel]

will look at this one too.

[mourner]

@fnicollet wow, thanks for the report! I hope that only affects tablets. Or is it broken on desktop IE11 too?

[fnicollet]

@mourner Note sure, i tried the map on the leaflet website in IE11 Desktop and i could pan the map but it is not using master so i don't know if that's like a false positive. I'm at work atm on Windows 7 so i can't test it yet but will tell you later on

[mourner]

@fnicollet added your fix to master, could you please retest both this issue and #2103, preferably on both desktop IE11 and tablet with touch?

[fnicollet]

Cool, thanks
I will try in desktop IE11, see how it behaves. Also, this fix does not fix #2103 in my testing so it should be reopened. I couldn't get to the root of the #2103 issue but it looks like it is something totally different

[mourner]

@fnicollet yeah, I didn't close that one yet :)

[fnicollet]

ah yes, it was a reference to the closed one, read too quick :)

[fnicollet]

Also broken in IE11 Desktop with master. The fix do work for dragging but multi-touch is still broken. I am going to try and investigate that one further

[fnicollet]

Strange thing, the map on http://leafletjs.com/ that uses stable version works ok when dragging but multitouch is also broken

[mourner]

You mean the master is broken in IE11 when interacting with touch, and works OK with mouse, right?

[fnicollet]

master: broken "simple" touch (dragging) and broken multitouch. The fix only fix the dragging behaviour, multitouch still broken
stable: ok "simple" touch (dragging) and broken multitouch. The fix doesn't change anything

[fnicollet]

Ok, first thing I just discovered, this test

var ie = !!window.ActiveXObject

return false in IE11. Even tho, using Visual Studio, if get as a value for it:

function ActiveXObject() {
    [native code]
}

Not sure why "!!" doesn't return true when it is a function? I tried it in IE9 and IE10, this test returns true.

Then the next test:

ie3d = ie && ('transition' in doc.style)

return false because "ie" is false and that's what is breaking multitouch on IE