padding bug on Safari mobile?

Question

(This is similar to the (also unanswered) question #3430506, but applies to input tags instead of HTML5 elements.)

On buttons, the iPhone/mobile Safari browser adds padding to the left and right. This doesn't happen on the desktop version, nor any other mobile/desktop Webkit browsers I've tried. It appears to add the font-size in px to each side (i.e. 14px font means total width is 14px + width of text + 14px).

Currently I'm trying the following to remove it:

/* webkit user-agent stylesheet uses input[type="submit"] */

form input[type="submit"] { /* more specific to override webkit */ 
   -webkit-appearance:none;  
   -webkit-border-radius:0px;
   margin:0;  
   padding:0;  
   border:0;  
   display:block;
}

I've seen lots of responses about using -webkit-appearance:none... this makes no difference. Neither does removing rounded corners. I made a page to demo how the desktop version renders various -webkit-appearance objects; all have -webkit-border-radius:0 and the above code applied.

Try viewing these on desktop Safari then iPhone:
http://deleri.com/test.html

(Safari Mobile screenshot for those without an iPhone:)
deleri.com/safari.png

While I'd love to know why this bug occurs, right now I'm more concerned about fixing it. I've tried every type of display/overflow/box-sizing/-webkit-anything-/width:auto/text-indent option imaginable, and can't fix it by manually setting the width (final width needs to be percentage-based, and the strange padding still applies). I'm starting to wonder if it's some obscure property, or if the user agent stylesheet isn't being overwritten. Any thoughts?

user_3010007 · Answer

I had a similar issue and I noticed that my issue was resolved when I set the background to a gradient instead of just plain background-color.

This somehow just ignored the padding values

#submit{
    background:#a0b9dc;
    padding:9px 35px;
 }

The code below resolved the padding issue for me on submit buttons.

#submit{
    background:#a0b9dc;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A0B9DC));
    background: -o-linear-gradient(bottom, #A0B9DC 0%);
    background: -moz-linear-gradient(bottom, #A0B9DC 0%);
    background: -webkit-linear-gradient(bottom, #A0B9DC 0%);
    background: -ms-linear-gradient(bottom, #A0B9DC 0%);
    background: linear-gradient(to bottom, #A0B9DC 0%);
    padding:9px 35px;
}

<input type="submit"> padding bug on Safari mobile?

5 Answers