5

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.

5 Answers 5

15

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.

2
  • KevBurnsJr: You're awesome man, thanks. I played with this for awhile, and couldn't get them to look right on the iPad. Your solution totally makes sense though, as it's math, if both corners exceed half the height, then the radius overlap. Whether it's a bug that iOS renders these differently than Safari, I'm not sure, perhaps less intuitive, but it seems iOS is just more strict with this particular case. Thanks for posting the note, I can move onto my other iPad issues. ;)
    – user746163
    May 10, 2011 at 4:49
  • Thank you for this answer, helped very much. I'd just like to add, this is an issue with pre iOS 5. So we can't be lazy with our border-radius i suppose.
    – sic1
    Jul 19, 2012 at 19:01
2

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.

1
  • Yes it's a bug, but there is a workaround. See my answer above.
    – KevBurnsJr
    Jul 27, 2011 at 22:39
1

Have you considered wrapping the textfield with a span/div/other container with a border-radius?

<style>
    body { background-color: #000; }
    .inputWrapper { -webkit-border-radius: 20px; }
</style>

...

<body>
    <div class="inputWrapper"><input type="text" value="text" /></div>
</body>
0

I'm not seeing this problem in my site, and I'm using the -webkit-border-radius of 8px with a background image that is assigned in the body style. I also have this style for my input box:

-webkit-box-shadow: 0px 5px 10px rgba(0,0,0,0.5);

Although the rounded corners are showing up fine, the box shadow does not display at all on mobile safari, even though it displays fine on desktop safari. Maybe having the -webkit-box-shadow style is allowing the radius designator to work?? You might give it a try because it's working for me.

You could also try using the individual border styles of:

-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius

When I used just -webkit-border-radius for a select box, it did not render right in mobile safari (again the desktop version was fine). When I changed to using the individual style settings, then it worked fine.

1
  • I'm pretty sure I tried that too, when I was having this problem. Aug 12, 2010 at 15:07
0

how about you put input { -webkit-border-radius: 20px; outline:0; } see the result.. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.