10 Replies Latest reply on Jun 17, 2016 6:09 AM by frankatuptop

    Phonegap issue with an iframe

    frankatuptop

      iOS 9.3.2
      Phonegap Build 6.1

      We're loading an iFrame from another vendor into our iOS app. The form loads perfectly fine. We tap on the form field and it does not allow any inputs. This occurs on multiple iPhones.

      We've made changes to the CSS for
      -webkit-user-select: none;

      now everything is

      input { -webkit-user-select: text; }

      We've disabled faskclick.js and made the changes suggested, still the same thing.

      Not sure what could be causing the problem. Any guidance would be appreciated.

        • 1. Re: Phonegap issue with an iframe
          risingj Adobe Employee

          Can you provide a simple app that reproduces the issue?

          • 2. Re: Phonegap issue with an iframe
            frankatuptop Level 1

            Absolutely. Is there a way we can chat? What is the best way to reach you off thread if possible.

            • 3. Re: Phonegap issue with an iframe
              frankatuptop Level 1

              risingj

               

              Here is the HTML. We replicated the issue with the latest phone-gap-build and just this.

               

              `

              <!DOCTYPE html>

              <html lang="en">

              <head>

                  <meta charset="utf-8" />

                  <title>Input Bug Test</title>

               

               

              </head>

              <body>

                  <script type="text/javascript" src="phonegap.js"></script>

                  <script type="text/javascript" id="paystand_checkout"

                          src="https://checkout.paystand.co/v3/js/paystand.checkout.js"></script>

                  <script type="text/javascript">

                PayStandCheckout.init({

                  "publishableKey": "gfjgsz3t4vbqklihsp9eev4c",

                  "checkoutDomain": "https://checkout.paystand.co/v3/",

                  "domain": "https://api.paystand.co",

                  "payment": {

                    "amount": "5000.20",

                    "currency": "USD"

                  },

                  "currency": "USD",

                  "paymentMethods": [

                    'echeck',

                    'card'

                  ],

                  "billing": {

                    "street": "41 Grandview St",

                    "city": "Santa Cruz",

                    "postalCode": "95060",

                    "subdivisionCode": "CA",

                    "countryCode": "USA"

                  },

                  "payer": {

                    "name": "Christina Chan",

                    "email": "demo+cchan@paystand.com"

                  },

                  "meta": {}

                });

                  </script>

               

              </body>

              </html>

              `

              • 4. Re: Phonegap issue with an iframe
                risingj Adobe Employee

                I am unable to replicate your issue from this html alone.  Is this what is loaded in the iframe? because I don't see anything load.

                 

                Can you please provide enough code to reproduce the issue?

                for example, create a new project with just the failing parts, and if that can reproduce the issue, zip up the www/ folder and post it.

                 

                Also, what version of phonegap are you using/expecting? The <script> to include phonegap.js was dropped in favor of cordova.js almost exactly 2 years ago. 

                What are you specifying, if anything, for phonegap-version in your config.xml?

                Is there a recent breaking change that made this issue appear? Did things work well on a previous version?

                • 5. Re: Phonegap issue with an iframe
                  bradm72022695

                  Hi @risingj

                   

                  We used phonegap version 6.1.0 and 6.0.0 to no avail.

                   

                  We removed all plugins.

                   

                  The code `PayStandCheckout.init` creates an iframe, and the inputs inside that iframe are are focusable, but no text input actually goes through.

                   

                  Our app consists of only the following html (no css/javascript except for paystand libraries).

                   

                  ```

                  <!DOCTYPE html>

                  <html lang="en">

                  <head>

                      <meta charset="utf-8" />

                      <title>Input Bug Test</title>

                   

                   

                   

                   

                  </head>

                  <body>

                      <script type="text/javascript" src="cordova.js"></script>

                      <script type="text/javascript" id="paystand_checkout"

                              src="https://checkout.paystand.co/v3/js/paystand.checkout.js"></script>

                      <script type="text/javascript">

                    PayStandCheckout.init({

                      "publishableKey": "gfjgsz3t4vbqklihsp9eev4c",

                      "checkoutDomain": "https://checkout.paystand.co/v3/",

                      "domain": "https://api.paystand.co",

                      "payment": {

                        "amount": "5000.20",

                        "currency": "USD"

                      },

                      "currency": "USD",

                      "paymentMethods": [

                        'echeck',

                        'card'

                      ],

                      "billing": {

                        "street": "41 Grandview St",

                        "city": "Santa Cruz",

                        "postalCode": "95060",

                        "subdivisionCode": "CA",

                        "countryCode": "USA"

                      },

                      "payer": {

                        "name": "Christina Chan",

                        "email": "demo+cchan@paystand.com"

                      },

                      "meta": {}

                    });

                      </script>

                   

                   

                  </body>

                  </html>```

                  • 6. Re: Phonegap issue with an iframe
                    frankatuptop Level 1

                    With all JS/CSS disabled, the issue still occurs. However, when I hold delete and keep deleting an empty field, I am able to then type this in a field

                     

                    However, when I hold down the delete key and delete any contents in a form field for a few seconds, when I stop I am able to then type this in that form field.

                    • 7. Re: Phonegap issue with an iframe
                      risingj Adobe Employee

                      I was only partially able to load your app.

                      An iframe was loaded but the content of it never loaded.

                       

                      Screen Shot 2016-06-16 at 2.27.21 PM.png

                      • 8. Re: Phonegap issue with an iframe
                        bradm72022695 Level 1

                        Can you try including a generic config with these 3 lines

                        <access origin="*" />

                          <allow-navigation href="*" />

                          <allow-intent href="*" />

                         

                        Also, fwiw, if we downgrade to cordova 3.7.0 and use "cordova-plugin-wkwebview", it works as intended.

                        • 9. Re: Phonegap issue with an iframe
                          risingj Adobe Employee

                          Okay, I was able to at least load the form with   <allow-navigation href="*" /> ( Hopefully you are not using that in your banking app !!)

                          The form fields are definitely wonky and I need to tap around to get things to work, but I can edit all form fields.

                          There appears to be some issue between angular in an iframe in a UIWebView, however, I do not believe this is a phonegap issue.

                          I do not know of a work around, but you may be able to have better luck with the InAppBrowser plugin.

                          • 10. Re: Phonegap issue with an iframe
                            frankatuptop Level 1

                            You're correct. I am posting a comment in case others stumble here.

                             

                            According to Shazron and risingj at Adobe, this is likely an Apple rendering issue in UIWebView. They have no control regarding UIWebView's bugs, so this is something everyone should take into consideration. We've downgrade to cordova 3.7.0 and use "cordova-plugin-wkwebview", it works as intended.