Menu
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.
670
I managed to fix this by reducing the border radius.
The bug seems to only present itself if the border radius is greater than half the height of the element.
So if -webkit-border-radius: 20px; make sure your element is at least 40 pixels tall.
Otherwise the border backgrounds overlap causing the dreaded uglybox.
61
Consensus from around the web is that this is a bug in WebKit for iOS. Don't use border-radius on text inputs on the iPhone.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
