I am currently developing using Phonegap Build. On IOS, when the keyboard shows and the view is scrolled to show what the keyboard is currently in front the view appears corrupted. It is fixed when the user loses and the keyboard closes.
The issue is consistent over all pages of the application, I have spent considerable time research but I cannot find any answers for this specific issue, any and all help is greatly appreciated.
Config shown below. The images below try to demonstrate the issue the best I can.
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="current.id" version="1.0.2">
<name>Foobar</name>
<description>an application</description>
<content src="index.html"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="14"/>
<preference name="Fullscreen" value="flase" />
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="permissions" value="none" />
<preference name="orientation" value="portrait" />
<gap:config-file platform="ios" parent="NSCameraUsageDescription" overwrite="true">
<string>We are using the Camera for the profile picture..</string>
</gap:config-file>
<gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription" overwrite="true">
<string>We are using the Camera for the profile picture..</string>
</gap:config-file>
<feature></feature>
<plugin name="cordova-custom-config" source="npm" spec="~4.0.2" />
<plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1"/>
<plugin name="cordova-plugin-console" source="npm" spec="~1.0.2"/>
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1"/>
<plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0"/>
<plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2"/>
<plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0"/>
<plugin name="cordova-plugin-file" source="npm" spec="~4.1.1"/>
<plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0"/>
<plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3"/>
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0"/>
<plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1"/>
<plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2"/>
<plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0"/>
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1"/>
<plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1"/>
<plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0"/>
<plugin name="cordova-plugin-media" source="npm" spec="~2.2.0"/>Step 1: Image 1, Focus on the input.
Step 2: Image 2, Scrolling slightly down while still focused on the input.
Continuing to scroll will cause the entire view to show white, except for a submit button at the very bottom.
I can then tap on the background / lose focus and the background and inputs will load back in.
Thanks for any assistance!
I think it's a css issue not a cordova config. iOS handles the web view scrolling by default whenever keyboard shows up.So if you have any additional css to handle page scroll on keyboard display please remove it.
