Safari bug with border radius, rounded corners and weird background

Question

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

Using Safari 6.0.1 and the following styles, my buttons render with an error:

This error occurs only in Safari.

.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 “repeating”, and the left border of the button has some color from what should only be at the bottom.

Has anyone encountered this error before or was aware of a fix? Thanks!

Answer 1

Cause

This is a bug related to Safari enabled hardware.

You can check by disabling " Automatic Graphics Switching " under " Energy " in " System Preferences " (I assume you are on a Mac because version 6+ is not available for Windows AFAIK).

Be that as it may, it should be fixed in the safari code.

Classic bypass

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

Clipping

Possible Solution -

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

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

Answer 2

I updated fiddle

I don’t think that in a normal scenario there should be a problem,

I just removed !important from properties that cannot be discarded.

I added a freezing effect ..,

Just make sure you can remove the padding:20px , or if you can reduce it, it will be a plus not recommended by me, at least since with the line height you solve the same goal ...

Try running this one if that helps.

Else if not decided please reply.

Answer 3

I think you are using

-webkit-border-radius: 5px;

You will get the radius you need.

Answer 4

You can try the following:

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

Follow this link: DEMO

Answer 5

You can try the following:

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

You can also follow this link: DEMO