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; , ie 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 .

Answer 3

This is in fact true and has nothing to do with the the way the code is written, it is a browser bug.

If you zoom in on a page with this bug, you will see that the rendering will display correctly for some zoom levels.

Still found no away to fix this.

Answer 4

I cannot reproduce your problem in my version of Safari.

However, I noticed that you have invalid HTML. As per the W3C spec , and the online HTML validator tool , <ul> elements must only contain <li> elements as immediate descendants.

Your HTML code is invalid:

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 1</a></li>
    <div class="clear"></div> <!-- this line is invalid HTML -->
</ul>

Remove <div class="clear"></div> from the <ul> and see if that clears it up...

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 1</a></li>
</ul>

You can use overflow: on the <ul> to force it to expand to contain its children and that totally eliminates the need for a clearing div .

ul {
    overflow: auto;
}

http://jsfiddle.net/sXxtU/7/

Answer 5

I had a similar problem, on FF20, but it appeared to only be me having accidently zoomed in on the page. Resetting the zoom to 0 removed the line.

Answer 6

Perhaps using even numbers instead of odd numbers will work: Safari 6.0.5 on ML

In my case I tested the following:

border-radius: 4px; /* HAPPY */
border-radius: 5px; /* SAD */
border-radius: 6px; /* HAPPY */

This appears to be a browser bug.

Answer 7

Try the following to adjust the border radius:

border-top-right-radius:10px;
-webkit-top-right-border-radius:10px;
border-top-left-radius:10px;
-webkit-top-left-border-radius:10px;