-ms-touch-action in IE10

If you’re optimizing your website for IE10 on tablets, get ready to deal with -ms-touch-action. This is a new CSS property introduced by Microsoft in IE10. Essentially, it determines what default browser behaviors to enable in touch mode. When I say default behavior, I mean things like:

• Making the whole page do the “elastic-bounce” when you swipe the page horizontally.
• Scrolling the page vertically
• Pinch-zooming
• Double-tap zoom

By default, -ms-touch-action: auto; on a page, and this means the browser will perform all these default behaviors. However, if your app is touch-optimized, you probably don’t want this to happen. You can set the property to a bunch of other values based on your needs.

So, what’s the issue? The problem is that the implementation seems flawed because there’s no good way to programmatically prevent default behavior. In other words, let’s say -ms-touch-action: auto; for all elements on the page. If you detect a swipe across an element, and you call e.preventDefault() because you don’t want the default behavior to occur, the default behavior will still occur.

But Tilo, you say, why would you do that? Why not set it in CSS if you know you’re going to prevent default? Well, there are lots of places where you want to prevent default behavior programmatically. One instance off the top of my head is if you have a JavaScript scrollview implementation, and you are toggling whether the scrollview is scrollable horizontally or vertically.

We at the YUI Team have filed a bug against Microsoft to get feedback on this implementation. Right now, we’re changing the CSS property under the hood, but this seems a little heavy-handed and hacky.

I haven’t looked into how -ms-touch-action works for native Win8 apps built on the WinJS API, but I anticipate that e.preventDefault() probably doesn’t work there either.