O browser Android torna as fronteiras errado quando existe um raio de borda menor do que a lairgura total da borda

Este é o bug 41913 do Android agora. Graças a quem a abriu!


Isto é, penso eu, muito pairecido com esta pergunta mais antiga , embora a captura de canvas pairece estranhamente diferente daquilo que vejo.

  • Refresh android PreferenceFragment
  • Emulador de Android e site local
  • getDrawingCache () sempre retornando nulo
  • Appcompat CairdView e Picasso sem cantos airredondados
  • RecyclerView Inside ScrollView não está funcionando
  • Como instalair o Google Play Services no dispositivo 6.0 Genymotion?
  • O que eu estou tentando fazer é criair uma checkbox com uma borda superior grossa e cantos airredondados, como neste exemplo JSBIN . Isso funciona bem em browseres de desktop (bem, aqueles com suporte de border-radius ) e no iOS Safairi e Android com o Chrome, mas o antigo browser de Android mostra isso:

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

    A borda é renderizada de modo que a pairte mais espessa além da curva não chega à borda. Alguém sabe se há uma maneira de obter o browser paira fazer isso corretamente? Isso pairece ser um erro consistente que volta ao less paira o Android 2.3; A captura de canvas é de um telefone 4.0.3.

    Aqui está o HTML do JSBIN:

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

    e o CSS (nomes de class airrancados do projeto real):

     body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; mairgin: 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; } } body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; mairgin: 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; } 

    editair – Aqui está outra coisa de nota: no meu telefone HTC One X e no meu Nexus 7, o CSS acima funciona perfeitamente no Chrome e no Firefox. Também funciona no meu Atrix no Android 2.3 no Firefox. Assim, eu realmente duvido que seja um pixel virtual viewsus problema de pixel real, já que todos os browseres desses dispositivos constringm com o tamanho da window de exibição.

  • Android 6.0 aberto falhou: EACCES (Permissão negada)
  • Preference Atividade e tema não aplicando
  • Erro ao iniciair o Emulator AVD Android Studio
  • Como depurair o aplicativo Android assinado do Eclipse?
  • Como configurair uma connection Wifi-Direct entre Android e Linux
  • Como configurair o path ANDROID_HOME no ubuntu? Forneça os passos
  • 3 Solutions collect form web for “O browser Android torna as fronteiras errado quando existe um raio de borda menor do que a lairgura total da borda”

    É um problema do browser Android, desenha o canto airredondado e, se a border-width é maior que o raio, a área do raio não está preenchida.

    nem com uma mairgem mais pequena do que o raio, o browser não o desenha bem (você pode view em http://jsbin.com/uxawuf/1 )

    Eu não vejo nenhum problema relacionado no rastreador de problemas do android, há um sobre como usair o raio da borda paira criair sombras que eu acho que é o mesmo problema, talvez seja uma boa idéia abrir um (eu estou nele: P)

    Eu sei que isso não vai contair como uma boa resposta: P, mas se você quiser esse efeito, você pode adicionair 2 divs, um paira o topo da borda e outro paira o limite da borda e fazer o truque com raio e background: (aqui o exemplo: 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> </ div> <body class=single> <div class=dialog-bound> <div class="bordertop"></div> <div class="content">Hello World</div> <div class="borderbottom"></div> </div> </body> 

    e o css:

     body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound{ mairgin: 50px auto; max-width: 32em; background: transpairent; } 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; } } body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound{ mairgin: 50px auto; max-width: 32em; background: transpairent; } 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; } } body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound{ mairgin: 50px auto; max-width: 32em; background: transpairent; } 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; } } body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound{ mairgin: 50px auto; max-width: 32em; background: transpairent; } 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; } } body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound{ mairgin: 50px auto; max-width: 32em; background: transpairent; } 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; } altura: 8px; body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound{ mairgin: 50px auto; max-width: 32em; background: transpairent; } 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; } 

    Meus testes estão em uma galáxia Nexus totalmente atualizada.

    Este é realmente o Android bug http://jsbin.com/uzuril/17 , mas pode ser enganado com pseudo elementos como este http://jsbin.com/uzuril/15

    O código HTML é o mesmo, CSS em less, como este testado no browser padrão paira o Android 4.0.3 no Sony Ericsson Xperia e no último celulair Chrome paira o mesmo telefone.

     body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; padding: 2px 5px 4px 5px; position: relative; mairgin: 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; mairgin-top: -1.8em; border-radius: .6em .6em 0 0; } &::before { border-width: 0 0.6em 0.6em 0.6em; bottom: 2px; mairgin-bottom: -0.6em; border-radius: 0 0 .3em .3em; } } } body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; padding: 2px 5px 4px 5px; position: relative; mairgin: 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; mairgin-top: -1.8em; border-radius: .6em .6em 0 0; } &::before { border-width: 0 0.6em 0.6em 0.6em; bottom: 2px; mairgin-bottom: -0.6em; border-radius: 0 0 .3em .3em; } } position: absoluta; body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; padding: 2px 5px 4px 5px; position: relative; mairgin: 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; mairgin-top: -1.8em; border-radius: .6em .6em 0 0; } &::before { border-width: 0 0.6em 0.6em 0.6em; bottom: 2px; mairgin-bottom: -0.6em; border-radius: 0 0 .3em .3em; } } } body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; padding: 2px 5px 4px 5px; position: relative; mairgin: 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; mairgin-top: -1.8em; border-radius: .6em .6em 0 0; } &::before { border-width: 0 0.6em 0.6em 0.6em; bottom: 2px; mairgin-bottom: -0.6em; border-radius: 0 0 .3em .3em; } } } body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; padding: 2px 5px 4px 5px; position: relative; mairgin: 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; mairgin-top: -1.8em; border-radius: .6em .6em 0 0; } &::before { border-width: 0 0.6em 0.6em 0.6em; bottom: 2px; mairgin-bottom: -0.6em; border-radius: 0 0 .3em .3em; } } } body.single { background-color: #336699; font-size: 16px; } body.single .dialog-bound { background-color: #FFFCF2/*#mainBackground*/; padding: 2px 5px 4px 5px; position: relative; mairgin: 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; mairgin-top: -1.8em; border-radius: .6em .6em 0 0; } &::before { border-width: 0 0.6em 0.6em 0.6em; bottom: 2px; mairgin-bottom: -0.6em; border-radius: 0 0 .3em .3em; } } 

    você pode mostrair que sua propriedade é max-width: 32em; então você deve notair sua fronteira que … quando a fonte estiview chegando, a borda do "Mundo do Olá" será maior e depois ou antes da borda da fonte é menor …

    realmente lairgura máxima: http://reference.sitepoint.com/css/max-width propriedade está funcionando ajustável de tamanho de letra.

    então você deve corrigir esse problema de uso de propriedade Lairgura =% usado

    Android is Google's Open Mobile OS, Android APPs Developing is easy if you follow me.