Windows Phone browser: taps triggered under modal.
I've been quite surprised how well the Windows Phone browser control (Mobile IE10 that is) has been working. There are a few problems of course, one thing we noticed that MSPointerDown and MSPointerUp events has wrong target (the event.target property).
We have a regular app layout with a header and page content. There is also some transient content we show as modals, like dialogs for example. This should be quite familiar to a frequent app user.
The problem is that when we show modals, buttons seem to get tapped under it (when using the tap event from zepto.js/hammer.js). Even though the modal, which is absolutly positioned with a higher z-index, is hiding the page behind it the event target is always below. This seem only to apply to buttons and inputs, not to other elements.
Here is a gist that reproduces the problem
Try it here with your Windows Phone.
Taps, which is really just a combination of MSPointerUp and a MSPointerDown, are triggered on the element 'btn' and not on 'modal' which is expected.
The solution? Add an empty onmspointerup="" and onmspointerdown="" on the modal container element. That seem to do some magic stuff. It does not seem to work if you do it by addEventListener and preventDefault. This seem to be fixed in Windows Phone 8.1 so no need to think about this if your are only targeting 8.1.