Why doesn't border-radius work properly on text inputs in MobileSafari?
- by abrahamvegh
Here is a reference HTML document:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #000; }
input { -webkit-border-radius: 20px; }
</style>
</head>
<body>
<input type="text" value="text" />
</body>
</html>
The border-radius renders fine on Safari/WebKit-based desktop browsers, but on the "MobileSafari" variant, namely the iPhone and iPad browsers, it renders with this strange box, which destroys the illusion of rounded corners when the input is being displayed on top of a differently-colored background.
