Safari in OS X – weird bug with border-radius

Question

I'm experiencing some really strange problems with border radius in Safari for Mac OS X. Take a look at this jsFiddle: http://jsfiddle.net/sXxtU/1/

Safari Mac OS X:

(Top left corner, and the white vertical line)

Chrome Mac OS X:

(Perfectly fine)

Safari iOS 6.0

(Also perfectly fine).

Now, in this example I am using border-radius: 5px 5px 0 0;, i.e. only applying it on the top corners. However, if I chose to round all the corners – I get this (in Safari for OS X):

Is this a known bug? Is there some way to remedy this? I'm guessing that it is due to some clipping issues, but no matter how I try to apply different fixes – I can't get it to look quite right.

Edit
I should point out that this is in Safari 6.0.2. haven't got the chance to test other versions just yet.

Edit 2
Tried adding border: 1px solid transparent; and it looks much better. However, if I go with a border color (like #fff) I still get some clipping problems (now in the top right corner...?). Still very interested in learning what's going on here.

Edit 3
User Sparky pointed out that my HTML is invalid (having a div-element inside a ul-element) – however, I have confirmed that this have nothing to do with the issues I am having.

Edit 4
Been testing Safari 6.0.2 some older versions of OS X, and this issue only seems to occur in 10.8.2. Very strange.

Answer 1

This is happening because you are inserting a div clear inside of the unordered list. Your list items should be set as display: inline-block and your ul could have a clearfix on it to maintain it's proper height even though your list items are floating left.

I tested this in 6.0 and then in 6.0.2

Here's a fork of your jsfiddle with a few tweaks.

http://jsfiddle.net/rossedman425/VTySS/1/

HTML:

<div class="container">
<div class="pill">
    <ul class="cf">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
    </ul>
</div>

CSS:

.container {
    padding: 20px;
}
.pill {
    background-color: #00a38f;
    border-radius: 5px 5px 0 0;
}
ul {
    padding: 13px;
    list-style: none;
}
li {
    float:left;
    margin-right: 20px;
    display: inline-block;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

Answer 2

Maybe that version of OS X is rendering the UL with some sort of background property. Its just a shot in the dark but maybe try background: transparent; on the UL. Or, if it will serve the same purpose, try moving the background color and border-radius to the UL.