How can I prevent iPad multitasking gestures on my website

Question

I am creating a website which provides a toucharea (a table element in this case) that collects multi-touch data from the user via touchevents (touch{start,move,end}). This is working fine and I was able to prevent the site from scrolling with event.preventDefault(). Furthermore I could prevent other default actions with these css rules:

*{
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
/* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-tap-highlight-color: rgba(0,0,0,0); 
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

But I am not able to prevent the multitasking-gestures from iPad that close or switch the browser app. Does anybody know a javascript code snippet or another CSS rule that could help me here?

Answer 1

The gestures occur at the OS level, so they can’t be interfered with by JavaScript.

More generally, the multitasking gestures are unreachable from anything in the app layer, so JavaScript would be unable to get out of the browser to disable them. (Even if you wrote a native app, you can’t work around them yet.)

I’d also argue that trying to interfere with the gestures, which the user has enabled and expects to work universally, is poor practice, and should be avoided.

Answer 2

I'm afraid you can't, those gestures are at the OS level, and cannot be manipulated or disabled by javascript.