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
- Double-tap zoom
-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.
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.