title: iOS Safari text input cursor appears outside input box
body: <p>I'm seeing a bizarre issue on iOS (8.4) Safari with a text input on a web page, where the input cursor is showing to the right and outside of my input box, when I apply a font-size, width and padding to style it as I want (and to prevent the auto-zoom on focus).</p>
  
  <p>Screenshot showing issue below:</p>
  
  <p><a href="https://i.stack.imgur.com/cBh66.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cBh66.png" alt="Cursor showing to right of input box"></a></p>
  
  <p>I'm applying the following styles in my CSS to the input element (type email):</p>
  
  <pre><code>font-size: 16px; width: 96%; padding: 2%;
  </code></pre>
  
  <p>It is in containers that are displayed block, no margin or padding, and widths of 100%.</p>
  
  <p>And I have the viewport tag set as such:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
  </code></pre>
  
  <p>Is this a known bug and is there a workaround? Or is there something in my CSS that is causing this issue?</p>