¿Por qué border-radius no funciona correctamente en entradas de texto en MobileSafari?

Aquí es un documento HTML referencia:¿Por qué border-radius no funciona correctamente en entradas de texto en MobileSafari?

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
body { background-color: #000; } 
input { -webkit-border-radius: 20px; } 
    </style> 
    </head> 
    <body> 
     <input type="text" value="text" /> 
    </body> 
</html>

El border-radius rinde muy bien en los navegadores de escritorio de Safari/basados en WebKit, pero en la variante "MobileSafari", es decir, los navegadores de iPhone y iPad, que hace que con este extraño cuadro , que destruye la ilusión de esquinas redondeadas cuando la entrada se muestra encima de un fondo de diferentes colores.

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

Fuente

2010-06-10 Abraham Vegh

consenso de toda la web es que este es un error en WebKit para iOS. No use border-radius en textinput s en el iPhone.

Fuente

2010-06-10 21:30:32

Sí, es un error, pero hay una solución. Ver mi respuesta arriba. – KevBurnsJr

¿Ha considerado envolver el campo de texto con un span/div/otro contenedor con un radio de borde?

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

...

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

Fuente

2010-06-11 02:55:16

que no estoy viendo este problema en mi sitio, y estoy usando el webkit-frontera de radio de 8 píxeles de una imagen de fondo que se asigna con el estilo del cuerpo También tengo este estilo para mi cuadro de entrada:

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

Aunque las esquinas redondeadas se muestran bien, la sombra de cuadro no se muestra en absoluto en el safari móvil, aunque se muestra bien en safari de escritorio. ¿Tal vez tener el estilo -webkit-box-shadow está permitiendo que el designador de radio funcione? Puede intentarlo porque me funciona.

También podría tratar de usar los estilos de borde individuales de:

webkit-border-top-izquierda-radio webkit-border-top-derecha radio webkit-border-bottom-izquierda radio webkit-border-bottom-derecha radio

Cuando yo simplemente webkit-frontera de radio para un cuadro de selección, no se rinde justo en Safari Mobile (de nuevo la versión de escritorio estaba bien). Cuando cambié a usar la configuración de estilo individual, funcionó bien.

Fuente

2010-08-10 23:34:03 imagimotion

Estoy bastante seguro de que intenté eso también, cuando estaba teniendo este problema. –

Logré solucionar esto reduciendo el radio del borde.

El error parece solo presentarse si el radio del borde es mayor que la mitad de la altura del elemento.

Si -webkit-border-radius: 20px; asegúrese de que su elemento tenga al menos 40 píxeles de alto.

De lo contrario, los fondos del borde se superponen y causan la temida uglybox.

Fuente

2011-03-09 05:59:08 KevBurnsJr

¡Gracias, esto funcionó para mí! –

KevBurnsJr: Eres un hombre increíble, gracias. Jugué con esto por un tiempo, y no pude hacer que se vean bien en el iPad. Su solución tiene sentido, sin embargo, ya que es matemática, si ambas esquinas superan la mitad de la altura, entonces el radio se superpone. Si es un error que iOS los presenta de forma diferente a Safari, no estoy seguro, tal vez menos intuitivo, pero parece que iOS es más estricto con este caso particular. Gracias por publicar la nota, puedo pasar a otros problemas con mi iPad. ;) –

Gracias por esta respuesta, ayudó mucho. Me gustaría añadir, este es un problema con iOS anterior 5. Por lo tanto, no podemos ser flojos con nuestro 'border-radius', supongo. – sic1

¿qué le parece poner la entrada {-webkit-border-radius: 20px; esquema: 0; } vea el resultado ... :)

Fuente

2013-03-31 12:36:10 shafiq

¿Por qué border-radius no funciona correctamente en entradas de texto en MobileSafari?

Respuesta

Cuestiones relacionadas