CODEWITHSUNDEEP
cssiosmobileinputmobile-safari
João
João

Reputation: 633

How to fix weird text input field bug on Mobile Safari?

While testing this responsive design I'm currently working on, I've noticed a weird text input field "width" bug pushing the window to the right on Mobile Safari, which I don't seem to be able to understand. If you check it on your computers, it will show just fine though. I've tested this both on my iPod and on iOS Simulator (bug shows up on all devices). Any suggestions?

Upvotes: 4

Views: 4421

Answers (1)

David Kaneda
David Kaneda

Reputation: 5490

So, basically, Mobile Safari and Desktop Safari have different default stylesheets. While you're doing a good job with widths, etc, the one thing you're missing is explicitly setting padding on the input. Guessing this is the culprit (desktop Safari inherently makes input padding 1px, probably a few px bigger in mobile). I see you're using -webkit-appearance: none (nice), so, as long as you explicitly declare padding, you should be good.

Upvotes: 6

Related Questions