CODEWITHSUNDEEP
safarirounded-cornerscss
HandiworkNYC.com
HandiworkNYC.com

Reputation: 11104

Safari bug with border radius, rounded corners, and strange background repeat

http://jsfiddle.net/7KDr8/7/

Using Safari 6.0.1, and the following styles, my buttons are rendering in a "buggy" fashion:

This bug only happens in Safari.

enter image description here

.btn {
    height: 40px !important;
    line-height: 40px !important;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    margin: 0 auto;
    float: left;
    margin-bottom: 40px;
    background-color: #15518d;
    background-repeat: no-repeat !important;
    border-bottom: 4px solid #032a52 !important;
    text-shadow: 0 0 3px rgba(0,0,0,.2);
    color: #fff !important;
    font-weight: 500;
    font-size: 15px !important;
    border-radius: 4px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-transform: none !important;
    cursor: pointer
}

As you can see, the right border of the button seems to start to "repeat" and the left border of the button has some of the color from what is supposed to only be in the bottom.

Has anyone encountered this bug before or know a fix? Thanks!

Upvotes: 7

Views: 4675

Answers (5)

kishan Radadiya
kishan Radadiya

Reputation: 832

You can try this:

.selector {
 -webkit-border-radius: 10px;
 -moz-border-radius:10px;
 border-radius:10px;
 -khtml-border-radius: 10px; 
}

Also you can follow this link : DEMO

Upvotes: 0

kishan Radadiya
kishan Radadiya

Reputation: 832

You can try this:

.selector {
    -webkit-border-radius: 10px;
    -moz-border-radius:10px;
    border-radius:10px;
    -khtml-border-radius: 10px;
}

Follow That link: DEMO

Upvotes: 0

user2570485
user2570485

Reputation: 11

i think you shoud use

-webkit-border-radius: 5px;

you will get your required radius.

Upvotes: 1

user1693593
user1693593

Reputation:

Cause

This is a bug related to hardware enabled Safari.

You can verify by disabling the "Automatic Graphics Switching" under "Energy" in "System Preferences" (I am assuming you're on Mac as version 6+ is not available to Windows AFAIK).

As it it a bug it needs to be fixed in the safari code.

Classic work-around

You can store your buttons as images and it will work in all browsers, the old fashion way - a tad more work (and bandwidth), but stable result.

Clipping

Possible solution -

From this post: Stray vertical line above 965 pixels with border radius in Safari

Add -webkit-background-clip: padding-box; to your CSS.

Upvotes: 9

MarmiK
MarmiK

Reputation: 5775

I have updated the fiddle

I don't think there should be problem in normal scenario,

I have just removed !important from the properties which should not be dropped.

I have added some hover effect..,

Just make sure if you can remove padding:20px or if you can reduce it, that will be a plus point not recommended by me at-least as with line height you are solving the same purpose....

Try to run this one if it helps..

Else if not solved please reply..

Upvotes: 1

Related Questions