Menu
This is Android bug 41913 now. Thanks to whomever opened it!
This is, I think, pretty much the same as this older question, though the screenshot there looks oddly different than what I see.
What I'm trying to do is create a box with a thick top border and rounded corners, as in this JSBIN example. That works fine on desktop browsers (well, ones with border-radius support) and on iOS Safari and Android with Chrome, but the old Android browser shows this:
(source: gutfullofbeer.net)
The border is rendered such that the thicker part beyond the curve doesn't make it to the edge. Does anybody know if there's a way to get the browser to do this properly? This seems to be a consistent bug going back at least to Android 2.3; the screenshot is from a 4.0.3 phone.
Here's the HTML from the JSBIN:
<body class=single>
<div class=dialog-bound>
Hello World
</div>
</body>
and the CSS (class names yanked from the actual project):
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;
}
edit — Here's another thing of note: on my HTC One X phone and on my Nexus 7, the above CSS works perfectly in Chrome and Firefox. It also works on my Atrix under Android 2.3 in Firefox. Thus, I really doubt it's a virtual pixel vs. actual pixel issue, since all the browsers on those devices agree on the viewport size.
393
It's a problem of the android browser, it draws the rounded corner and if the border-width is higher than the radius the area of the radius it's no filled.
neither with a border widht smaller than the radius the browser don't draw it well (you can see in http://jsbin.com/uxawuf/1 )
I don't see any related issue at the bug tracker of android, there's one about using the border radius to make shadows that I think it's the same problem , maybe it's a good idea open one (i'm on it :P)
I know this will not count as an good answer :P but If you want this effect you can add 2 divs, one for the border top and other for the border bottom, and do the trick with radius and background: ( here the example: 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>
and the 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;
}
My tests are in a galaxy Nexus fully updated.
119
This is indeed Android bug http://jsbin.com/uzuril/17, but it could be cheated with pseudo elements like this http://jsbin.com/uzuril/15
HTML code is the same, CSS in LESS like this tested in default browser for Android 4.0.3 on Sony Ericsson Xperia and in latest Chrome mobile for same phone.
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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
