Bootstrap Inputs on safari 6 not right?

Question

I'm having a problem with Twitter Bootstrap Inputs showing correctly on safari 6.0.

Im pretty sure this was fine before I moved to Mountain Lion, and it does seem to be an issue with Chrome.

Basically in Safari, the right end of the input seems cut off an is not displaying correctly. Ive taken a screen shot to demo what I mean...

Safari:

Chrome:

Any ideas?

EDIT: Just looking at the Twitter Bootstrap site and I see that alot of their inputs have the same problem! Anyone else seeing this?

Answer 1

The artifact appears to be an issue with Safari's rendering of border-radius, and is not specific to Twitter Bootstrap. See rendering borders on Apple's support forum. The inputs usually render normally after you select them.

Disabling border-radius on the affected elements with the following two lines removes the artifact. Be careful though, sometimes this causes even more puzzling artifacts on nearby buttons.

-webkit-border-radius: 0;
border-radius: 0;