Safari iOS text input cursor is displayed outside the input field

Question

I see a strange problem in iOS (8.4) Safari with text input on a web page where the input cursor is displayed to the right and outside of the input field when I apply the font size, width and padding to style it the way I want (and prevent auto-enlargement focus).

Screenshot showing the problem below:

I apply the following styles in my CSS to the input element (enter email address):

font-size: 16px; width: 96%; padding: 2%; 

This is in containers that appear as a block, without margins or indents, and the width is 100%.

And I have a viewport tag as such:

 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

Is this a known bug and is there a workaround? Or is there something in my CSS that causes this problem?

Answer 1

Have you tried adding overflow: hidden in the CSS <input> ? I don't have a device with iOS 8.4, but it looks like it should do the trick.