9

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:

Cursor showing to right of input box

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?

JamieNewman
  • 917
  • 1
  • 12
  • 20
  • Also see this [iOS Safari 8 input overflow scroll](http://stackoverflow.com/questions/28544163/ios-safari-8-input-overflow-scroll), again very interesting thing. – Stickers Jul 26 '15 at 20:52
  • https://stackoverflow.com/questions/46339063/ios-11-safari-bootstrap-modal-text-area-outside-of-cursor/47710508#47710508 – Swapnil Dalvi Dec 11 '17 at 13:21

1 Answers1

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.

Kevin
  • 36
  • 1
  • 7