CSS3 button renders differently on web vs iOS

Question

I found some code for generating CSS3 buttons which I'm using on my site. The buttons look great when viewed in the browser. However, on the mobile web version of my site (which uses the same styles) the buttons render differently. Even stranger, if I use Safari and view my site with User Agent of iPhone the buttons look as they should. However in iOS Simulator they don't. Can someone help me understand why?

Here's the code I'm using:

.button, #button .button, li.button .button { 
  display: inline-block; 
  zoom: 1; 
  *display: inline; 
  vertical-align: baseline; 
  outline: none; 
  cursor: pointer; 
  text-align: center; 
  text-decoration: none; 
  font: 14px/100% Arial, Helvetica, sans-serif; 
  padding: .5em 1.5em .55em; 
  text-shadow: 0 1px 1px rgba(0,0,0,.3); 
  -webkit-border-radius: .5em; 
  -moz-border-radius: .5em; 
  border-radius: .5em; 
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
  box-shadow: 0 1px 2px rgba(0,0,0,.2); 
}

.orange, #button .orange { 
  color: #fef4e9; 
  border: solid 1px #da7c0c; 
  background: #f78d1d; 
  background: -webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20)); 
  background: -moz-linear-gradient(top, #faa51a, #f47a20); 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
}

Here is how it renders in the browser:

enter image description here

And here is how it renders on an iPhone:

enter image description here

score 14 · Answer 1 · answered Mar 03 '12 at 07:18

14

Apply "-webkit-appearance:none;" on your css properties and add this line "input[type=submit], input[type=Reset]{ -webkit-appearance:none; }".

answered Mar 03 '12 at 07:18

Shakti

218
2
15

score 4 · Answer 2 · edited May 23 '17 at 11:54

As Shakti says you should just put the following css for the button.

-webkit-appearance: none;

This is explained further in this question:

'CSS submit button weird rendering on iPad/iPhone'

It seems that on iOS the buttons have the default iOS rounded look if you supply just a simple background color :

background: orange

But if you supply a gradient then this is effectively overriding the appearance css property to use a custom style.

But because you had the wrong syntax it was giving you the iOS look.

score 1 · Accepted Answer · answered Mar 03 '12 at 01:02

I caught my mistake. I had the wrong syntax for -webkit-gradient. Instead of:

-webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20));

It's...

-webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));

I had a comma between left and top where it shouldn't have been.

score 0 · Answer 4 · answered Mar 02 '12 at 13:53

0

Have you tried using an SVG as your background image (generator can be found here)? Using this worked on an iPhone 3G I have lying around (jsFiddle link here):

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZBQTUxQSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Y0N0EyMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkwNCkiIC8+Cjwvc3ZnPg==);

This is compatible with IE9, Chrome, Safari and Opera. This will not work with IE7/8. What I suggest is using an IE specific stylesheet or adding to the .orange class instructions to apply the style to IE7 or IE8 and below. More info on that here.

answered Mar 02 '12 at 13:53

Mathachew

2,044
2
18
31

Thanks. I'll give that a go, but is there any reason why it's not working as is? – tvalent2 Mar 02 '12 at 14:36
Sorry, I don't know why. I have limited iOS exposure. Perhaps `-webkit-gradient` isn't supported, but something like `linear-gradient` or `-webkit-linear-gradient` is. [This CSS gradient generator](http://gradients.glrzad.com/) might also interest you, though the Microsoft one using SVG is handy since one definition works on most modern browsers. – Mathachew Mar 02 '12 at 14:41
Can't edit my post, but I meant to say that `linear-gradient` may be supported and while `-webkit-linear-gradient` is. – Mathachew Mar 02 '12 at 14:54
Found my mistake - I had the wrong gradient syntax. Thanks for your help though! – tvalent2 Mar 03 '12 at 01:03

CSS3 button renders differently on web vs iOS

4 Answers4