为什么border-radius在MobileSafari中的文本输入上没有正常工作？

Here is a reference HTML document:

这是一个参考HTML文档：

<!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.

border-radius在基于Safari / WebKit的桌面浏览器上渲染得很好，但在“MobileSafari”变体上，即iPhone和iPad浏览器，它会使用这个奇怪的框渲染，当输入显示时会破坏圆角的错觉在不同颜色的背景之上。

http://cl.ly/1LUi/content

5 个解决方案

#1

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.

所以如果-webkit-border-radius：20px;确保您的元素至少高40像素。

Otherwise the border backgrounds overlap causing the dreaded uglybox.

否则边框背景重叠导致可怕的丑陋盒子。

#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.

来自网络的共识是，这是WebKit for iOS中的一个错误。不要在iPhone上的文本输入上使用border-radius。

#3

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

您是否考虑过使用带有border-radius的span / div / other容器包装文本字段？

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

...

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

#4

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-border-radius of 8px和一个在主体样式中分配的背景图像。我的输入框也有这种风格：

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

-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.

尽管圆角显示得很好，但是在移动野生动物园中，盒子阴影根本不显示，即使它在桌面游猎中显示得很好。也许有-webkit-box-shadow风格允许半径指示符工作？你可以尝试一下，因为它对我有用。

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.

当我只使用-webkit-border-radius作为选择框时，它在移动Safari中没有正确呈现（桌面版本也很好）。当我改为使用单独的样式设置时，它工作正常。

#5

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

怎么样输入{-webkit-border-radius：20px;概要：0;看到结果.. :)

#1