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 <input type="submit"> 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?

score 8 · Answer 1 · answered Aug 26 '10 at 22:03

8

Do you have control over the form? aka: did you manually enter the form?

If so add either a id or class tag to it

<input type="submit" id="submit" value="submit">

then adjust your css to

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

answered Aug 26 '10 at 22:03

canintex

638
1
7
21

I do have control over the form and tried a mix of both ID's and classes when styling; neither worked. (Made it as specific as possible with no luck.) – pixi Aug 27 '10 at 18:33
The text inside the value attribute of the button was off so I just added -webkit-appearance:none and it's centered now but -webkit-border-radius no longer works and I had a rounded button there. Anyway I voted this cause a square button is better than I rounded button with just half of the text on it. Thanks! – Raul Feb 09 '14 at 11:07
@Andrei change `-webkit-border-radius: 0px` to `-webkit-border-radius: 5px` and you should end up with a button with a 5px rounded corners. – canintex Dec 03 '14 at 19:47

score 4 · Answer 2 · answered Nov 19 '13 at 17:59

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;
}

Yes this works but border radius is no longer applied, still a decent fix though — Raul, Feb 09 '14 at 11:12

score 2 · Accepted Answer · answered Aug 24 '10 at 10:21

If you try setting the padding to an enormous value, say 100px, you'll notice that the top and bottom padding grow, while again left and right stays at the default value, in mobile Safari. So I suppose it's safe to assume that this quite simple counts as a bug in the webkit routines of iOS, and there is no direct solution unless Apple fixes the problem.

A workaround would be to create a DIV that looks like whatever you want it to, and add an onclick handler that submits your form. No need to ever use a real submit button.

I ended up using straight links with a JS handler to submit onClick... it may not work in the final release, but it's a good temp fix. Thanks! (Fingers crossed that Apple fixes that bug soon.) — pixi, Aug 27 '10 at 18:34

score 2 · Answer 4 · answered Feb 21 '11 at 06:50

I ran into this bug today when my mom told me that a page I had made was missing text on her old iPhone 3G. Sure enough, I fired up my wife's old 3G we have lying in a drawer someplace, and the text on one of my buttons is being pushed off to the side because Safari is inserting some giant spacing.

The good news is that in the latest update (don't know exactly what, but I've got an updated iPhone 4), this bug has been fixed.

Bad news is that if users don't update their browsers, I can't find any way around it outside of just not using the tag.

My advice for right now is to check the version of Mobile Safari. If they're running the latest version (or whichever version fixed this bug or higher), they get the page with the button. If not, they can get served a page with alternate tags used to make the buttons. On my page this doesn't look as nice, and it's a little awkward, but I'm already checking browsers based on mobile or desktop versions of the site, so this isn't too much on top of that.

Hope this helps.

score 1 · Answer 5 · answered Aug 23 '10 at 13:31

1

This might be a daft suggestion, but if the problem is with

<input type="submit" />

could you try changing it for

<button type="submit" />

Which does the same thing but might not have the bug?

answered Aug 23 '10 at 13:31

hellweaver666

343
2
10

Thanks for the suggestion, but unfortunately it's the same bug; see the question #3430506 linked above. – pixi Aug 24 '10 at 05:51

padding bug on Safari mobile?

5 Answers5

Linked