Bootstrap Safari 6 inputs right?

Question

I have a problem with Twitter Bootstrap logins that display correctly on Safari 6.0.

I'm sure it was good before I moved to Mountain Lion, and this seems like a problem with Chrome.

Mostly in Safari, the right end of the input seems to be cut off, not displaying correctly. Ive taken a screenshot to demonstrate what I mean ...

Safari:

Chrome:

Any ideas?

EDIT: just look at the Bootstrap Twitter site and I can see that many of their inputs have the same problem! Has anyone else seen this?

Answer 1

The artifact seems to be a problem with boundary radius Safari rendering and is not specific to Twitter Bootstrap. See the display of borders on the Apple Support Forum. Inputs are usually displayed usually after selecting them.

Disabling the boundary radius on the affected elements with the following two lines removes the artifact. Be careful, sometimes it causes even more mysterious artifacts on nearby buttons.

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