Gray background on scroll in a Cordova iOS App - ios

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>

Related

how to fix cordova navbar that falls down on IOS only?

I'm submitting cordova build to android and ios.. unfortunately on ios, navbar falls down in every menu.
White space on top
Navbar pushed down and not sticking to top when scrolling
I'm using node.js v8.11.2, cordova 8.0.0, 9.0 ios deployment target and i've tried in every iphone, navbar keeps falls down.
<preference name="StatusBarOverlaysWebView" value="false"/>
<preference name="StatusBarBackgroundColor" value="#000000"/>
<preference name="StatusBarStyle" value="lightcontent"/>
I also read some post about IOS status bar problem and tried to add some code above to config.xml and still not working as expected.
Isn’t it because on top of iOS displays are system info data (time, Wi-Fi etc.). So app is basically pushed down, so best way for me was specify “StatusBarBackgroundColor” to correspond with your navbar.
Steve

Cordova 6.1.1 overscroll and UI bounce IOS

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.

Ionic remove white blank space above keyboard

I am building an app using ionic framework. I got two issues.
I am getting a blank white space above keyboard.
White screen appears after splash screen and before app loading. I have tried the below mentioned code. But no use of it.
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
How to avoid the white screen before app loading and how to avoid the blank space above the keyboard transition.
Thanks,
Raj.

Full screen scroll (IOS)

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" />

Removing splash-screen loading gif from Cordova app

I'm having a problem overriding Cordova's defaults when writing an app.
I'm writing an iOS app using the Cordova (formerly PhoneGap) framework and Xcode. Cordova lets me add a splash screen for the project by just dragging and dropping it in under the info tab for my project in Xcode. This part works fine, but there is a default loading-indicator gif running over the top of the splash image (I'm not sure whether it's from Xcode or from Cordova).
How can I remove the loading-indicator image?
You can remove the loading spinner in Cordova.plist. Set ShowSplashScreenSpinner to false.
Update:
In Cordova 3.0+ adding <preference name="ShowSplashScreenSpinner" value="false" /> to your config.xml will accomplish the same goal.
I just removed the Launch images source and set the launch screen file to mainviewcontroller
Go to General Setting -> at bottom side Launch images resource and launch screen setting is available
If you have an IOS device i have a working method that you can use, it solved my problem when compiling for IOS. (Firstly i want to say you need to add an icon and splash in the correct folders or else Cordova will their default ones for you and also make sure that they are large enough so that the resources can be generated accordingly):
Remove the SplashScreen plugin provided using
cordova plugin rm cordova-plugin-splashscreen
Place your icon in the resources/ios/ folder and name it
icon.png
Go to the route of your directory and add your splash image (make sure that splash.png is 2800px * 2800px)
splash.png
Remove the ios platform if you installed it already and then re add it
ionic cordova platform rm ios
ionic cordova platform add ios
5.Run the following command to generate your icon
ionic cordova resources ios --icon
if building for android
ionic cordova resources android --icon
6.Add the following lines to your config.xml
<preference name="SplashScreen" value="none" />
<preference name="SplashScreenDelay" value="0" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
This should solve the default icon and remove the splash screen which Cordova adds to the IOS project by default. I hope it helps!

Resources