Dojo/touch may throw "Type Error: 'null' is not an object" and fail to call touch.move handlers

[Eric Durocher]

Using dojo/touch, when listening to touch.move events, the handler may not be called because of a "Type Error: 'null' is not an object" error that occurs in dojo/touch.

This happens on an IOS 5 mobile device (iPhone), when the page is higher than the screen size, and the user has scrolled the page (using the native browser scroll). See the attached sample that reproduces the problem (place the sample in dojo/tests and run it on an iPhone with IOS 5).

The origin seems to be a change in the behavior of the document.elementFromPoint function between IOS 4 and 5, which now expects coordinates relative to the viewport, not the whole page.

The fix would be to substract window.pageX/YOffset from the coordinates used to get the hovered object in the touchmove handler, but this must be done on IOS 5 only since the code is correct for IOS 4.

[Eric Durocher]

Test case that reproduces the problem.

[Eric Durocher]

This does not seem to be specific to IOS 5 actually, it can also be reproduced on Android (all versions that we tested). So in fact the code should be fixed in all cases except IOS 4.

[bill]

Judging from ​https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint (which keeps mentioning "window"), sounds like the standard behavior is for coordinates relative to the viewport.

Although I don't yet understand why test_dnd.html isn't failing (firefox or chrome) even when the browser window is scrolled. Do you know?

[bill]

Replying to edurocher:

The fix would be to substract window.pageX/YOffset from the coordinates used to get the hovered object in the touchmove handler, but this must be done on IOS 5 only since the code is correct for IOS 4.

Actually, the code already does essentially the same thing:

hoveredNode = win.doc.elementFromPoint(
	evt.pageX - win.body().parentNode.scrollLeft,
	evt.pageY - win.body().parentNode.scrollTop
);

Perhaps that doesn't work on iOS?

[bill]

Oh, I remember now, there's something weird about scrolling on mobile devices where it isn't really scrolling, so the above code doesn't work. I'll check in the general fix. Since I don't have iOS4 I won't add code for that. If you want to, then you can add branching code for iOS4.

[bill]

In [29445]:

fix dojo/touch.move on scrolled pages on mobile, except for iOS4 which I can't test, fixes #15821, refs #15185 !strict.

[Adrian Vasiliu]

Unfortunately, with this fix I still get the error in edurocher's test case. Besides the failure on iOS 4 (expected, because the old code was correct for iOS 4), it also fails on iOS 5 with the same errors as before, that is win.doc.elementFromPoint still returns null. Reproduced on iPhone 4S iOS 5.0.1 and iPad 2 iOS 5.1.1 (and iPhone iOS 4.3.3).

[Adrian Vasiliu]

BTW, the source of info we found about the changes with this respect in iOS 4 vs. 5: ​http://www.icab.de/blog/2011/10/17/elementfrompoint-under-ios-5/

[bill]

Hmm, that's odd. Is the DnD at least fixed for you (test_dnd.html)?

[Adrian Vasiliu]

I do get in the console the NPE (null return from elementFromPoint) after playing a while with test_dnd.html, although I can't say I noticed an impact on the DND behavior. Tested on iPhone 4S iOS 5.0.1.

BTW, there's also demos/touch, where the slider doesn't work well on the same iPhone, but this doesn't work well with the previous version either.

[Eric Durocher]

I do reproduce the bug too after the fix, although with more difficulty, by moving my finger completely out of viewport while dragging (for example keep your finger down an drag completely up the iphone/ipad). Indeed, elementFromPoint seems to return null when the point is outside the viewport (although you can apparently get touch events out of the viewport).

So I think just testing for null return from elementFromPoint and doing nothing in that case should fix that.

[Adrian Vasiliu]

I've tried with the following code (doing nothing if elementFromPoint returns null):

on(win.doc, "touchmove", function(evt){
  var elem = win.doc.elementFromPoint(
    evt.pageX - win.global.pageXOffset,
    evt.pageY - win.global.pageYOffset
  );
  if (elem){
    var oldNode = hoveredNode;
    hoveredNode = elem;
    if(oldNode !== hoveredNode){ ...remaining code... }
  }
}

The results on iPhone 4S iOS 5.0.1.:

• edurocher's touch_bug.html: OK
• tests/dnd/test_dnd.html: OK (DND works even when the page is scrolled)
• demos/touch: the slider is still KO (but as I said it wasn't working with the previous version either).

[bill]

OK, I'll check that in.

[bill]

In [29451]:

ignore null result from elementFromPoint(), refs #15821 !strict

[bill]

Filed #15831 to track the iOS4 issue. The slider in demos/touch is working for me (well, dragging the handle is working, clicking the bar is not). What problem were you seeing? You should file a separate ticket if there's a problem and it doesn't have a ticket yet.

[Adrian Vasiliu]

(about the slider trouble)

bill: done, I filed #15834 (together with a patch).

[bill]

Backported to 1.7 in e7403082d02faba2e47cb645d2532dd2920f60b8.