15 Replies Latest reply on Sep 15, 2016 9:30 AM by widonwaker

    iOs when prompted keyboard all bugs

    widonwaker Level 1

      Hi,

       

      basically i have a single field form in my app, when i press it, keyboard appears (of course) , when i close the keyboard or send the form, my app becomes 90% grey and all the layout is destroyed. What really happens , why, and how to solve this?

       

      I'm using latest iOs version, iPhone SE. App built with cli-6.3.0.

        • 1. Re: iOs when prompted keyboard all bugs
          kerrishotts Adobe Community Professional

          Can you post a before & after screenshot? Also, it would help to see your config.xml to see what plugins and preferences you've configured (remove any identifying/secret information).

           

          Also, are you using PhoneGap Build or are you using a CLI?

          • 2. Re: iOs when prompted keyboard all bugs
            widonwaker Level 1

            Step 1:

            IMG_0276.PNG

            Step 2:

            IMG_0277.PNG

            Step 3:

            IMG_0278.PNG

             

            My config:

             

            <?xml version="1.0" encoding="UTF-8"?>

             

            <!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->

            <widget xmlns     = "http://www.w3.org/ns/widgets"

                    xmlns:gap = "http://phonegap.com/ns/1.0"

                    id        = "X"

                    version   = "1.0.0">

             

                <name>SS Cuore di Gesù</name>

             

                <description>

                    X

                </description>

             

                <author href="X" email="X">

                   Y

                </author>

             

                <!--

                    If you do not want any permissions to be added to your app, add the

                    following tag to your config.xml; you will still have the INTERNET

                    permission on your app, which PhoneGap requires.

                -->

                <preference name="permissions"                value="none"/>

             

                <!-- Customize your app and platform with the preference element. -->

                <preference name="orientation"                value="portrait" />        <!-- all: default means both landscape and portrait are enabled -->

                <preference name="target-device"              value="universal" />      <!-- all: possible values handset, tablet, or universal -->

                <preference name="fullscreen"                 value="true" />           <!-- all: hides the status bar at the top of the screen -->

                <preference name="webviewbounce"              value="true" />           <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->

                <preference name="prerendered-icon"           value="true" />           <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->

                <preference name="stay-in-webview"            value="false" />          <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->

                <preference name="ios-statusbarstyle"         value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->

                <preference name="detect-data-types"          value="true" />           <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->

                <preference name="exit-on-suspend"            value="false" />          <!-- ios: if set to true, app will terminate when home button is pressed -->

                <preference name="show-splash-screen-spinner" value="true" />           <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->

                <preference name="AutoHideSplashScreen"       value="true" />           <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->

                <preference name="SplashScreenDelay"          value="2000" />   

                <preference name="disable-cursor"             value="false" />          <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->

                <preference name="android-installLocation"    value="auto" />           <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->

                <preference name="android-build-tool"         value="gradle" />

                <preference name="DisallowOverscroll"         value="true"/>

                <!--

                    Define a specific version of PhoneGap to build into your app.

                    <preference name="phonegap-version"       value="3.5.0" />

                -->

             

                <!-- Plugins -->

             

                <!-- Core plugins -->

                <!--<plugin name="cordova-plugin-battery-status" source="npm"/>-->

                <!--<plugin name="cordova-plugin-camera" source="npm"/>-->

                <!--<plugin name="cordova-plugin-media-capture" source="npm"/>-->

                <!--<plugin name="cordova-plugin-console" source="npm"/>-->

                <plugin name="cordova-plugin-contacts" source="npm"/>

                <plugin name="cordova-plugin-device" source="npm"/>

                <plugin name="cordova-plugin-device-motion" source="npm"/>

                <plugin name="cordova-plugin-device-orientation" source="npm"/>

                <plugin name="cordova-plugin-dialogs" source="npm"/>

                <!--<plugin name="cordova-plugin-file" source="npm"/>-->

                <!--<plugin name="cordova-plugin-file-transfer" source="npm"/>-->

                <plugin name="cordova-plugin-geolocation" source="npm"/>

                <plugin name="cordova-plugin-globalization" source="npm"/>

                <plugin name="cordova-plugin-inappbrowser" source="npm"/>

                <plugin name="cordova-plugin-media" source="npm"/>

                <!--<plugin name="cordova-plugin-network-information" source="npm"/>-->

                <plugin name="cordova-plugin-splashscreen" source="npm"/>

                <!--<plugin name="cordova-plugin-vibration" source="npm"/>-->

               

             

                <!-- Third party plugins -->

                <!-- A list of available plugins are available at https://build.phonegap.com/plugins -->

               

                   

                    <plugin name="onesignal-cordova-plugin" source="npm" />

             

               

             

                <!-- Define app icon for each platform. -->

                <icon src="icon.png" />

                <icon src="res/icon/android/icon-36-ldpi.png"   gap:platform="android"    gap:qualifier="ldpi" />

                <icon src="res/icon/android/icon-48-mdpi.png"   gap:platform="android"    gap:qualifier="mdpi" />

                <icon src="res/icon/android/icon-72-hdpi.png"   gap:platform="android"    gap:qualifier="hdpi" />

                <icon src="res/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:qualifier="xhdpi" />

                <icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" />

                <icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" gap:state="hover"/>

                <icon src="res/icon/ios/icon-60@3x.png"         gap:platform="ios"        width="180" height="180" />

                <icon src="res/icon/ios/icon-57.png"            gap:platform="ios"        width="57" height="57" />

                <icon src="res/icon/ios/icon-72.png"            gap:platform="ios"        width="72" height="72" />

                <icon src="res/icon/ios/icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />

                <icon src="res/icon/ios/icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />

                <icon src="res/icon/webos/icon-64.png"          gap:platform="webos" />

                <icon src="res/icon/windows-phone/icon-48.png"  gap:platform="winphone" />

                <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone"   gap:role="background" />

             

                <!-- Define app splash screen for each platform. -->

                <platform name="android">

                <splash src="res/screen/android/screen-ldpi-portrait.png"               density="ldpi" />

                <splash src="res/screen/android/screen-mdpi-portrait.png"               density="mdpi" />

                <splash src="res/screen/android/screen-hdpi-portrait.png"               density="hdpi" />

                <splash src="res/screen/android/screen-xhdpi-portrait.png"              density="xhdpi" />

                </platform>

                <gap:splash src="res/screen/blackberry/screen-225.png"              gap:platform="blackberry" />

                <platform name="ios">

               <!-- images are determined by width and height. The following are supported -->

               <splash src="res/screen/ios/Default-iphone.png" width="320" height="480"/>

               <splash src="res/screen/ios/Default@2x-iphone.png" width="640" height="960"/>

               <splash src="res/screen/ios/Default-Portrait-ipad.png" width="768" height="1024"/>

               <splash src="res/screen/ios/Default-Portrait@2x-ipad.png" width="1536" height="2048"/>

               <splash src="res/screen/ios/Default-Landscape-ipad.png" width="1024" height="768"/>

               <splash src="res/screen/ios/Default-Landscape@2x-ipad.png" width="2048" height="1536"/>

               <splash src="res/screen/ios/Default-568h@2x-iphone.png" width="640" height="1136"/>

               <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>

               <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>

               <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>

                </platform>

                <gap:splash src="res/screen/windows-phone/screen-portrait.jpg"      gap:platform="winphone" />

             

                <gap:config-file platform="ios" parent="CFBundleShortVersionString">

                <string>100</string>

                </gap:config-file>

             

                <!--

                    Define access to external domains.

                    <access />            - a blank access tag denies access to all external resources.

                    <access origin="*" /> - a wildcard access tag allows access to all external resource.

                    Otherwise, you can specify specific domains:

                    <access origin="http://phonegap.com" />                    - allow any secure requests to http://phonegap.com/

                    <access origin="http://phonegap.com" subdomains="true" />  - same as above, but including subdomains, such as http://build.phonegap.com/

                    <access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser.

                -->

             

                <access origin="*"/>

                <!-- Added the following intents to support the removal of whitelist code from base cordova to a plugin -->

                <!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html -->

                <plugin name="cordova-plugin-whitelist" version="1" />

                <allow-intent href="http://*/*" />

                <allow-intent href="https://*/*" />

                <allow-intent href="tel:*" />

                <allow-intent href="sms:*" />

                <allow-intent href="mailto:*" />

                <allow-intent href="geo:*" />

                <platform name="android">

                    <allow-intent href="market:*" />

                </platform>

                <platform name="ios">

                    <allow-intent href="itms:*" />

                    <allow-intent href="itms-apps:*" />

                    <gap:config-file platform="ios" parent="NSLocationAlwaysUsageDescription" overwrite="false">

                    <array>

                    <string>Some text</string>

                    </array>

                    </gap:config-file>

                    <gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true">

                    <false/>

                    </gap:config-file>

                </platform>

                <platform name="windows" />

             

            </widget>

            • 4. Re: iOs when prompted keyboard all bugs
              kerrishotts Adobe Community Professional

              What version of PhoneGap are you building with? Are you using the CLI or PhoneGap Build? I'm assuming the latter, since you've got `source="npm"` in your config.

               

              Also, you've got quite a few plugins installed -- do you need them all?

               

              Try removing all the plugins and adding them back one by one. If the problem initially disappears but comes back after you add a specific plugin, then you know the culprit.

               

              You might also try adding Ionic's keyboard plugin to see if it helps address the issue: ionic-plugin-keyboard

               

              Is the gray color in the last image the background color of your app?

              • 5. Re: iOs when prompted keyboard all bugs
                widonwaker Level 1

                Tried removing all plugins but nothing, the problem is stll there. No, my app has white background colour, not gray... :S

                 

                Oh i also tried that ionic keyboard plugin , but same... (i just incorporated it in config.xml).

                • 6. Re: iOs when prompted keyboard all bugs
                  kerrishotts Adobe Community Professional

                  Do you have any other devices on which to test? I can't say I've ever seen that kind of behavior.

                   

                  Are you using any UI frameworks? (Ionic, Angular, etc.?)

                  • 7. Re: iOs when prompted keyboard all bugs
                    widonwaker Level 1

                    Ok i found the problem. It's jquery-mobile.js causing the issue. But the strange thing is, if i test the page online (with smartphone ofc) it's ok, but when i build it in phonegap, my app goes on that issue...

                     

                    So it's like phonegap build breaks something.

                    • 8. Re: iOs when prompted keyboard all bugs
                      VectorP Level 4

                      ...or the webview, or the OS, or your hardware. Why Phonegap Build?

                      The screenshots remind me of some issue in a graphics adapter or graphics driver.

                      Keep in mind that thousands of developers use jQM, and hardly ever an issue like yours is reported, so it rather looks like a local problem.

                       

                      As Kerry already wrote: Do you have any other devices on which to test?

                      • 9. Re: iOs when prompted keyboard all bugs
                        widonwaker Level 1

                        I tested on 3 different iphones and same problem. It's the

                         

                        "

                        Enhances and consistently styles text inputs."

                         

                        option of jquery-mobile.js .

                        • 10. Re: iOs when prompted keyboard all bugs
                          kerrishotts Adobe Community Professional

                          I doubt it's anything specific to PGB. Keep in mind that PGB's web view is not identical to Mobile Safari's web view, so there can occasionally be differences. I doubt that's the case here, though.

                           

                          More questions/thoughts:

                          - What version of jQuery Mobile are you using?

                          - How are you loading jQuery Mobile? Is it stored locally or are you pulling it from a CDN?

                          - Do you have any custom styling? It might help to see it if you have any. If you do have custom styling, also try disabling it and see if the issue persists.

                          - Using the Ionic keyboard plugin, disable scrolling of the web view (see the plugin docs). Does that eliminate the problem?

                          - You might try switching to WKWebView and see if the problem goes away -- although I'm not sure that it is supported by PGB.

                          - If you want, you can send me your code and I'll test against one of my devices. If possible, it's preferable to post a link to a zip publicly so everyone on the forum can help, but I understand that clients and such may not appreciate that, but might be OK with sharing the app privately.

                          • 11. Re: iOs when prompted keyboard all bugs
                            widonwaker Level 1

                            actually it's quite simple.

                             

                            go there: http://jquerymobile.com/download-builder/

                             

                            and in Forms -> Text Inputs & Textareas .

                             

                            If you enable that voice, you will have the issue. Actually i removed it and all works fine, but i had to style the input manually ...

                            • 12. Re: iOs when prompted keyboard all bugs
                              kerrishotts Adobe Community Professional

                              "If you enable that voice" -- not sure what you mean?

                               

                              Also, did you have anything else checked on that page?

                              • 13. Re: iOs when prompted keyboard all bugs
                                widonwaker Level 1

                                i mean when you check "Forms -> Text Inputs & Textareas ."

                                 

                                Since it's a builder, checking that voice will include it in the build. I have all Cores included and other voices, but if i don't include Forms -> Text Inputs & Textareas i don't have the issue. If I include it, keyboard bug appears.

                                • 14. Re: iOs when prompted keyboard all bugs
                                  kerrishotts Adobe Community Professional

                                  Are you using the 1.4.5 branch?