CODEWITHSUNDEEP
buttoncss
tvalent2
tvalent2

Reputation: 5009

CSS3 button renders differently on web vs iOS

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

Upvotes: 4

Views: 6129

Answers (4)

Simon_Weaver
Simon_Weaver

Reputation: 146198

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.

Upvotes: 4

Shakti
Shakti

Reputation: 218

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

Upvotes: 14

tvalent2
tvalent2

Reputation: 5009

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.

Upvotes: 1

Mathachew
Mathachew

Reputation: 2034

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.

Upvotes: 0

Related Questions