Prevent scrolling out of CordovaView in Cordova for Windows Phone 8

Question

In a Windows Phone 8 Cordova application I'm able to click and drag horizontally in the app and pan/scroll past the horizontal edge of the display. See the Cordova Windows Phone 8 standalone template application:

The HTML behind this template application has a proper viewport specification, as far as I can see:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

This bug prevents any kind of swipe gesture detection from being useful. The iOS UIScrollView control has a bounces property that allows a somewhat similar effect to be canceled.

Is this a Cordova bug? Is there some setting that can be placed on the container of the Cordova WebBrowser such that this panning can't happen?

Answer 1

please use this in the body tag of your HTML...i have fixed the bouncing and rubber band effects.

 backface-visibility:hidden;
-webkit-backface-visibility:hidden;
 overflow: hidden;
-ms-content-zooming: none;
-ms-touch-action:none;

Answer 2

Two extra CSS properties on the body tag fixed the panning problem in both the standalone template app and in the original app I was working on:

body {
  overflow: hidden;
  -ms-content-zooming: none; }

This ms-content-zooming property does not restrict vertical scrolling within elements that are children of the body element.