Webview Bounce on Windows 8 Phone

Question

I need to know if there is a way to control the webview interception property in Windows 8. I tried -ms-touch-action: none; , it stops the jump, but disables all scrolling in the application.

I tried the following, but this does not work: -

 <meta name="msapplication-tap-highlight" content="no" /> backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow: hidden; -ms-content-zooming: none; 

So, please let me know if there are any other methods to control the rollback? Any help would be appreciated. thanks

Answer 1

Actually, "overflow: hidden"; works for me. Without it, web browsing bounces, and with it the screen remains the same as what I do.

My general CSS section is as follows:

 @-ms-viewport {width: device-width;} * { -webkit-tap-highlight-color: rgba(0,0,0,0); font-family: sans-serif; margin: 0; padding: 0; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height: 100%; position: relative; } body { -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; -ms-content-zooming: none; -ms-user-select: none; overflow: hidden; width: 100%; height: 100%; background: url("../img/bg.jpg") #B6B6B6; background-size: 100%; } 

HTML5 is not "universal", as you might think, styles are filled with platform-specific tricks ...

Answer 2

This solution is based on the Windows Xaml project.

  public MainPage() { InitializeComponent(); this.CordovaView.DisableBouncyScrolling = true; //Splash_Screen(); } 

I added this to my C # class file. Works great

use the latest cord 2.5 +

---

You can also control webview crash in CSS by following this solution:

Link: fooobar.com/questions/1502346 / ...

Answer 3

I solved this by creating a “scrollable” style in CSS:

 .scrollable { overflow: scroll; touch-action: pan-y; -ms-touch-action: pan-y; } 

And then in the area of ​​your markup that you want to scroll:

 <div class="scrollable"> Hello world<br/> Hello world<br/> Hello world<br/> Hello world<br/> Hello world<br/> Hello world<br/> Hello world<br/> </div> 

Answer 4

This works on Windows 10 Mobile. I got it from WinJS templates:

 html, body { height: 100%; width: 100%; margin: 0; cursor: default; -ms-scroll-translation: vertical-to-horizontal; } html { overflow: hidden; } body { -ms-content-zooming: none; }