Thursday, September 6, 2012

Stop the UIWebView bounce for Cordova based projects.


For every Cordova (PhoneGap) app that I've created for iOS, I've wanted to prevent the UIWebView from bouncing. There's two potential solutions, one is a setting in the plist, and the second is a change to the objective-c code.

For PhoneGap 1.5.0 and later the best solution is to set "UIWebViewBounce" to "NO" in the PhoneGap.plist/Cordova.plist file (which file you have depends on which version of the SDK you are using.) In the 'Root' of the plist file, look for "UIWebViewBounce", and set it to "NO" or "false" (If it's missing, go ahead and add it to the plist file.)
UIWebViewBounce  NO

For versions previous to 1.5 and native projects that are using the UIWebView, you would need to make a change to the Objective-C in the project.
The solution is to send the setBounces:NO message. You'll need to change the MainViewController.m (or AppDelegate.m file in older versions of Cordova/Callback/PhoneGap).

Look for webViewDidFinishLoad, and within that method add the following line:
[[theWebView.subviews objectAtIndex:0] setBounces:NO];

Note, that I've seen suggestions that the following Javascript would work:
document.onload = function(){
    document.ontouchmove = function(e){ e.preventDefault(); }
};
This doesn't work because the bounce occurs before the document.ontouchmove event is fired.

10 comments:

  1. You can disable the bounce by setting UIWebViewBounce false in cordova.plist

    ReplyDelete
    Replies
    1. Yeah, and since that's the easiest approach when it works, I've added it to the post. Thanks.

      Delete
  2. Thanks alot for this fix! - I've written my own blog post on it, with some more javascript wizardry
    http://networkprogramming.wordpress.com/2012/11/13/selectively-prevent-vertical-scrolling-in-phonegap-app/

    ReplyDelete
  3. Hi Paul...

    Thanks it worked like a charm with 1.4.1 (well actually the variable names are different but I found the right one)

    Really happy got rid of the wired web effect... now the app look really "native"!
    Regards

    -Claudio

    ReplyDelete
  4. Hey,
    Is there an equivalent for Android?
    - I've tried:


    But it doesn't work.

    I am using PhoneGap 2.2

    Cheers
    Jeremy

    ReplyDelete
    Replies
    1. Hi Jeremy,

      Ok, I did some more investigation & I think my latest post should help:

      http://tripleshotsoftware.blogspot.com/2013/02/stop-android-bounce-on-cordova-phonegap.html

      Paul

      Delete
  5. How to create multiple webviews in Cordova/phonegap architecture ? any pros/ cons using this ? I have done profiling through instrument , didn't find any leakage, still my app crashes after 30 mins. How to deal with this ?

    ReplyDelete
    Replies
    1. I'm not sure what the pros & cons would be, nor do I have a clue as to why you'd be crashing, but I'm fairly certain that the ChildBrowser plug-in actually opens another webview, so that might be a good place to start to get a working implementation. Good luck!

      Delete
  6. It works, but it also disables bouncing for the app's inner content, not a perfect way.

    ReplyDelete