title: Stripe.js v3 elements requiring double tap to focus (but only on iPad/iPhone)
body: <p>I've been working with Bootstrap 4 beta and Stripe.js v3. If you're not familiar with this newer version of Stripe.js, it's basically injecting iframes into spans, and making the spans act as if they are form inputs. I'm not in love with the idea, but it's supposedly more PCI compliant that the older version of Stripe.js (v2). </p>
  
  <p>Demo here: <a href="https://codepen.io/skunkbad/pen/BdgYmY" rel="nofollow noreferrer">https://codepen.io/skunkbad/pen/BdgYmY</a></p>
  
  <p>Reducing the HTML down to what represents my credit card input looks like this:</p>
  
  <pre><code>&lt;span id="card-number" class="form-control"&gt;
      &lt;!-- iframe is injected here by Stripe.js --&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Due to CSS styles from Bootstrap 4, this span.form-control has a display of "flex", and I have to change that or I can't see what I type into the field.</p>
  
  <pre><code>#card-number.form-control {
      display:block;
  }
  </code></pre>
  
  <p>This ends up working fine for all of the browsers I have tried:</p>
  
  <ul>
  <li>Firefox on Ubuntu 16.04</li>
  <li>Chrome on Ubuntu 16.04</li>
  <li>Internet Explorer on Windows 8.1</li>
  <li>Chrome on Android N Phone</li>
  <li>Safari on iPad</li>
  <li>Safari on iPhone</li>
  </ul>
  
  <p>But on the IOS devices that I've tried (iPad and iPhone), I have to double tap the field to get focus and start typing. The Stripe.js Elements demo on the Stripe website doesn't have this problem, so I'm assuming it's related to Bootstrap 4's CSS.</p>
  
  <p>Full code for your testing enjoyment:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
    &lt;title&gt;Stripe.js v3 with Bootstrap 4 (beta) Test&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"&gt;
    &lt;style&gt;
      /* Blue outline on focus */
      .StripeElement--focus {
        border-color: #80BDFF;
      }
      /* Can't see what I type without this */
      #card-number.form-control,
      #card-cvc.form-control,
      #card-exp.form-control {
        display:block;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div class="container-fluid"&gt;
      &lt;h1 class="mt-5"&gt;Stripe.js v3 with Bootstrap 4 (beta) Test&lt;/h1&gt;
      &lt;div id="card-errors" role="alert"&gt;&lt;/div&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-body"&gt;
          &lt;form id="payment-form"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="name"&gt;Name on Card&lt;/label&gt;
              &lt;div class="input-group"&gt;
                &lt;span class="input-group-addon"&gt;A&lt;/span&gt;
                &lt;input type="text" class="form-control" id="name"&gt;
                &lt;span class="input-group-addon"&gt;B&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="card-number"&gt;Credit Card Number&lt;/label&gt;
              &lt;div class="input-group"&gt;
                &lt;span class="input-group-addon"&gt;C&lt;/span&gt;
                &lt;span id="card-number" class="form-control"&gt;
                  &lt;!-- Stripe Card Element --&gt;
                &lt;/span&gt;
                &lt;span class="input-group-addon"&gt;D&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="card-cvc"&gt;CVC Number&lt;/label&gt;
              &lt;div class="input-group"&gt;
                &lt;span class="input-group-addon"&gt;E&lt;/span&gt;
                &lt;span id="card-cvc" class="form-control"&gt;
                  &lt;!-- Stripe CVC Element --&gt;
                &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="card-exp"&gt;Expiration&lt;/label&gt;
              &lt;div class="input-group"&gt;
                &lt;span id="card-exp" class="form-control"&gt;
                  &lt;!-- Stripe Card Expiry Element --&gt;
                &lt;/span&gt;
                &lt;span class="input-group-addon"&gt;F&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;button id="payment-submit" class="btn btn-primary"&gt;Submit Payment&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://js.stripe.com/v3/"&gt;&lt;/script&gt;
  &lt;script&gt;
    $(document).ready(function(){
  
      // Create a Stripe client
      var stripe = Stripe('pk_test_A45s2laXHrCRj6Tow44dk67z');
  
      // Create an instance of Elements
      var elements = stripe.elements();
  
      // Try to match bootstrap 4 styling
      var style = {
        base: {
          'lineHeight': '1.35',
          'fontSize': '1.11rem',
          'color': '#495057',
          'fontFamily': 'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'
        }
      };
  
      // Card number
      var card = elements.create('cardNumber', {
        'placeholder': '',
        'style': style
      });
      card.mount('#card-number');
  
      // CVC
      var cvc = elements.create('cardCvc', {
        'placeholder': '',
        'style': style
      });
      cvc.mount('#card-cvc');
  
      // Card number
      var exp = elements.create('cardExpiry', {
        'placeholder': '',
        'style': style
      });
      exp.mount('#card-exp');
  
      // Submit
      $('#payment-submit').on('click', function(e){
        e.preventDefault();
        var cardData = {
          'name': $('#name').val()
        };
        stripe.createToken(card, cardData).then(function(result) {
          console.log(result);
          if(result.error &amp;&amp; result.error.message){
            alert(result.error.message);
          }else{
            alert(result.token.id);
          }
        });
      });
  
    });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There's only so much one can do to alter the styles and fonts of the Stripe Elements, but again I think the problem is coming from Bootstrap 4's CSS. I've tried fiddling around with the styles of the span, but without success.</p>
  
  <p>So my question is, what specific changes can I make to my CSS that would allow iPad and iPhone users to simply click once like everyone else?</p>