I am working on Ionic 2 having Cordova 6.1.1. My app overscrolls for a down scroll at the top of the page and bounces on a text box focus (when keyboard opens).
This seems to be a generic problem and has some solutions for earlier versions of cordova.
The following preferences are set correctly in my config.xml.
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
They do not work for Cordova 6.1.1 or above (6.2.0) !!
Thanks.
Related
I'm working on a mobile app using Phonegap/Cordova.
I built the ipa file using Phonegap Build and installed it on my iPhone.
I noticed when I scroll up or down at the edges of the view (like iOS bounce scrolling), the whole application view scrolls down (or up) and a gray background color appears.
I tried finding if there's a CSS code for that, but no luck.
I'm guessing maybe its something related to view-port.
Things to Consider:
- I'm using Framework7 v3
- PhoneGap Build cli-6.5.0
- iPhone 6S Plus
Screenshots of the issue:
What can be done to fix this bug?
Add the following to to your config.xml and then run cordova prepare:
<platform name="ios">
<preference name="DisallowOverscroll" value="true" />
<preference name="UIWebViewBounce" value="false" />
</platform>
I have cordova project where i use cordova status bar. I recently upgraded to
cordova-ios to 4.3.1 (previous version was 4.2.1). After the upgrade my status bar gets "pushed" up by (for example) fb dialog when it is opened, which breaks status bar layout (only 60% of the status bar is visible) and the bottom menu is also partially visible. This is only happening on cordova-ios, android is fine.
My cordova is 6.5.0 here are the status bar preferences:
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#3e5579" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="CDVStatusBar" value="false" />
<preference name="DisallowOverscroll" value="true" />
Any ideas?
On Ionic 2.0.0-beta.37 and iOS 10.1.1 I can't disable rubber banding for my views.
I've this in config.xml
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
and this on my ion-content
<ion-content sroll="false" has-bouncing="false" overflow-scroll="false">
but none of these works. Any tip on what to try is welcome.
Setting -webkit-overflow-scrolling: auto on my scrolling element solved the issue
I have made an iOS application using PhoneGap Build, Which works fine. I am having some kind of problem while scrolling a page. When I scroll from bottom or from Top whole screen moves. Is there any way to prevent this,as I know this is iOS feature. Which is very nice but in case of my application I do not want this. So help me out.
Use this in you config file:
<preference name="DisallowOverscroll" value="true" />
<preference name="webviewbounce" value="false" />
I just tested Cordova 3.1 with a sample iOS app and experienced several keyboard issues.
App settings:
Xcode 5
Status bar is hidden
Landscape mode
config.xml
Issues:
All versions: when focus on an input field then whole view is pushed up including navbar.
iOS5/6: tap on an input field to open keyboard, then a black gap is briefly displayed at top of screen before keyboard pushes whole view up (is it status bar?)
iOS7: there is no black gap like #2 issue, but there are other issues:
I still see accessories bar before it's removed (hidden).
Keyboard is translucent then I can see darker background in the space where current view is pushed up.
If I changed , things are even worse:
View is still pushed up, and when input field loses focus then a black gap is flickring at the top of screen, even on iOS 7, what doesn't happen if KeyboardShrinksView = false.
Keyboard is no longer translucent on iOS 7.
Below is my config.xml
<preference name="DisallowOverscroll" value="true" />
<preference name="HideKeyboardFormAccessoryBar" value="true" />
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
<preference name="KeyboardShrinksView" value="true" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="TopActivityIndicator" value="gray" />
<preference name="EnableLocation" value="false" />
<preference name="EnableViewportScale" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="BackupWebStorage" value="none" />
<preference name="Fullscreen" value="true" />
<preference name="Orientation" value="landscape" />
Check out this thread. A lot of the same issues were reported here. It would be best if you added your information to the Cordova JIRA bug tracking system since that's where all the cordova developers work out of.
https://issues.apache.org/jira/browse/CB-3020?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13769996#comment-13769996
I was able to get the top header from sliding around by adding in a simple animation to the resizing of the webview. Here is the code that was put in the keyboardWillShow function in CDViewController.m
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
[self.webView setFrame:(CGRectMake(newFrame.origin.x, newFrame.origin.y, newFrame.size.width, newFrame.size.height))];
[UIView commitAnimations];
I was close to getting the black bar from being hidden but couldn't get it working very well. This post describes what you will need to do. You'll need to hae the webview reizing animation match the keyboard animation.
iOS 7 - Keyboard animation