title: Strange behaviour on HTML inputs on IOS Safari
body: <p>I have an interface of four numeric inputs for pin entry. As an input is populated the next is selected to give focus. </p>
  
  <p>html:</p>
  
  <pre><code>    &lt;div class="pinInputs"&gt;
      &lt;div class="pinInputsWrapper"&gt;
          &lt;div class="small-2 large-2 columns"&gt;
              &lt;input name="pinInput1" 
                     id="pinInput1" 
                     tabindex="1" 
                     maxlength="1" 
                     pattern="[0-9]" 
                     autofocus="true" 
                     data-autofocus="true" 
                     type="tel" /&gt;
          &lt;/div&gt;
          &lt;div class="small-2 large-2 columns"&gt;
              &lt;input name="pinInput2" 
                     id="pinInput2" 
                     tabindex="2" 
                     maxlength="1" 
                     pattern="[0-9]"
                     type="tel" /&gt;
          &lt;/div&gt;
          &lt;div class="small-2 large-2 columns"&gt;
              &lt;input name="pinInput3" 
                     id="pinInput3" 
                     tabindex="3" 
                     maxlength="1" 
                     pattern="[0-9]" 
                     type="tel" /&gt;
          &lt;/div&gt;
          &lt;div class="small-2 large-2 columns"&gt;
              &lt;input name="pinInput4" 
                     id="pinInput4" 
                     tabindex="4" 
                     maxlength="1" 
                     pattern="[0-9]" 
                     type="tel" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .pinInputs {
      max-width: 16.4em;
      margin: 0 auto;
  }
  .pinInputsWrapper {
      height: 3.2em;
  }
  .columns {
      margin: 0 2.5%;
      float:left;
      width:20%;
      height:100%;
  }
  
  input {
      font-size: 1.5em;
      color: #024734;
      text-align: center;
      margin-bottom: 0;
      height: 100%;
      padding: 0;
      width: 100%;
  }
  
  input:not(:focus){
      -webkit-text-security: disc;
      -mox-text-security: disc;
      -moz-text-security: disc;
      -o-text-security: disc;
      text-security: disc;
      color: #31953e;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>    $("input").bind("input change", function(ev) {
          var index = parseInt(ev.srcElement.id.slice(-1));
          if (index &lt; 4 &amp;&amp; ev.srcElement.value) {
              $('#pinInput' + (index+1)).select();
          }
      });
  </code></pre>
  
  <p>I've created it in this jsfiddle:
  <a href="https://jsfiddle.net/ek7rhgsj/8/" rel="nofollow">https://jsfiddle.net/ek7rhgsj/8/</a></p>
  
  <p>To Reproduce the issue:
  Populate the inputs with single digit numeric characters and then move back deleting the content as you go. When all inputs are empty re-populate. The disc is now pushed to the bottom of the input rather thhan being vertically aligned. This is only reproducable on mobile safari. I can see it on iphones running ios 8.1.1, ios 8.2 and 9. It's possibly there on other versions but these are all the test devices I have available at the moment. Has anyone seen similar before and if so is there a workaround?</p>
  
  <p>Any ideas greatly appreciated
  C</p>