Mobile Safari and Border Radius

One of the first things I wanted to do with my new iPad was to check out my latest project on it. Right away I noticed that the CSS rounded corners I had on elements weren’t showing up. My first thought was I coded something wrong, but checking the site on Webkit and Chrome confirmed that my rounded corners were showing up fine. So I started thinking that Mobile Safari somehow forgot to add border radius to it’s css rendering. I was wrong again. I started doing some testing by building a simple page with a box on it. I added -webkit-border-radius: 5px; and it worked great on the iPad. So I copied the styles from my project and applied them to the box. No rounded corners! I started eliminating styles for fear that something was conflicting with -webkit-border-radius. Turns out that Mobile Safari doesn’t like the shorthand way of writing the style. Check out the comparison shots I took below of the same page.

Here are what the boxes look like in Webkit…

Here are what the boxes look like on the iPad…

I don’t understand why Mobile Safari is treating the shorthand version of the style differently than Webkit. It sucks because I use the shorthand way to change individual corners on elements (some boxes in my project only need the top corners rounded). I would hate to write a style for each individual corner the longhand way like -webkit-border-top-left-radius: 5px;

[Update]

SASS to the rescue:

// Border Radius
@mixin border_radius($tl: 5px, $tr: 5px, $br: 5px, $bl: 5px) {
  -moz-border-radius: $tl $tr $br $bl;
  -webkit-border-top-left-radius: $tl;
  -webkit-border-top-right-radius: $tr;
  -webkit-border-bottom-right-radius: $br;
  -webkit-border-bottom-left-radius: $bl;
  border-radius: $tl $tr $br $bl;
}

By modifying my mixin to include the longhand styles for webkit border radius will now show up on mobile safari. This is another reason why Sass kicks ass because I only had to modify this single mixin and my entire project got updated. Just another reason why if you write CSS for a living you need to be using Sass.