El navegador de Android muestra las fronteras erróneas cuando hay un radio de borde más pequeño que el ancho total del borde

Esto es Android error 41913 ahora. ¡Gracias a quien lo abrió!

Esto es, creo, más o menos lo mismo que esta vieja pregunta , aunque la captura de pantalla parece extrañamente diferente de lo que veo.

Lo que estoy tratando de hacer es crear una caja con un borde superior grueso y esquinas redondeadas, como en este ejemplo JSBIN . Eso funciona bien en los navegadores de escritorio (bueno, los que tienen soporte de border-radius ) y en iOS Safari y Android con Chrome, pero el navegador Android antiguo muestra esto:

Androide http://gutfullofbeer.net/android.png

El borde se hace tal que la parte más gruesa más allá de la curva no llega al borde. ¿Alguien sabe si hay una manera de obtener el navegador para hacer esto correctamente? Esto parece ser un error consistente que se remonta al menos a Android 2.3; La captura de pantalla es de un teléfono 4.0.3.

Aquí está el HTML de la JSBIN:

 <body class=single> <div class=dialog-bound> Hello World </div> </body>

Y el CSS (nombres de clase arrancados del proyecto real):

 body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; margin: 50px auto; max-width: 32em; border-width: 28px 0 8px 0; border-style: solid; border-color: #89BAE2; -webkit-border-radius: 10px 10px 5px 5px; border-radius: 10px 10px 5px 5px; padding: 0 5px 2px 5px; }

Editar – Aquí está otra cosa de la nota: en mi teléfono HTC One X y en mi Nexus 7, el CSS anterior funciona perfectamente en Chrome y Firefox. También funciona en mi Atrix bajo Android 2.3 en Firefox. Por lo tanto, realmente dudo que sea un píxel virtual frente a un problema real de píxeles, ya que todos los navegadores de esos dispositivos coinciden en el tamaño de la ventana gráfica.

Es un problema del navegador android, dibuja la esquina redondeada y si el border-width es mayor que el radio del área del radio no se llena.

Ni con una frontera más pequeña que el radio que el navegador no lo dibuja bien (se puede ver en http://jsbin.com/uxawuf/1 )

No veo ningún problema relacionado en el rastreador de errores de android, hay uno sobre el uso del radio de la frontera para hacer sombras que creo que es el mismo problema, tal vez es una buena idea abrir uno (estoy en él: P)

Sé que esto no contará como una buena respuesta: P pero si quieres este efecto puedes añadir 2 divs, uno para la parte superior de la frontera y otro para la parte inferior de la frontera, y hacer el truco con el radio y el fondo: (aquí el ejemplo: http://jsbin.com/exexol/9 )

 <body class=single> <div class=dialog-bound> <div class="bordertop"></div> <div class="content">Hello World</div> <div class="borderbottom"></div> </div> </body>

Y el css:

 body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound{ margin: 50px auto; max-width: 32em; background: transparent; } body.single .dialog-bound .content{ padding: 0 5px 2px 5px; background-color: #FFFCF2; } body.single .dialog-bound .bordertop{ border-radius: 10px 10px 0px 0px; background:#89BAE2; height:28px; -webkit-border-radius: 10px 10px 0 0; } body.single .dialog-bound .borderbottom{ border-radius: 0 0 5px 5px; background:#89BAE2; height:8px; -webkit-border-radius: 0 0 5px 5px; }

Mis pruebas están en una galaxia Nexus completamente actualizada.

Esto es en realidad bug Android http://jsbin.com/uzuril/17 , pero podría ser engañado con elementos pseudo como este http://jsbin.com/uzuril/15

El código HTML es el mismo, CSS en menos como este probado en el navegador por defecto para Android 4.0.3 en Sony Ericsson Xperia y en el último móvil de Chrome para el mismo teléfono.

 body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; padding: 2px 5px 4px 5px; position: relative; margin: 50px auto; max-width: 32em; &::after, &::before { border-style: solid; border-color: #89BAE2; content: ''; left: 0; right: 0; position: absolute; } &::after { border-width: 1.8em 1.8em 0 1.8em; top: 2px; margin-top: -1.8em; border-radius: .6em .6em 0 0; } &::before { border-width: 0 0.6em 0.6em 0.6em; bottom: 2px; margin-bottom: -0.6em; border-radius: 0 0 .3em .3em; } }

Puede mostrar su propiedad es max-width: 32em; Así que usted debe notar su frontera que … cuando la fuente está viniendo "Hola mundo" la frontera llega a ser más grande y después o antes de la frontera de la fuente es más pequeña.

En realidad max-width: http://reference.sitepoint.com/css/max-width propiedad está trabajando ajustable de fontsize.

Por lo que debe solucionar este problema uso de la propiedad Width =% used