iOS Safari text input cursor appears outside input box

Question

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).

Screenshot showing issue below:

I'm applying the following styles in my CSS to the input element (type email):

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

It is in containers that are displayed block, no margin or padding, and widths of 100%.

And I have the viewport tag set 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 is causing this issue?

Answer 1

Did you try adding overflow: hidden to the <input> CSS? I don't have a device running iOS 8.4, but that seems like it should do the trick.