Android Webview Border-Radius Aliasing

Android WebView border-radius aliasing

There is no imageless solution to this in the curent Android release, sadly.

Android WebView border-radius aliasing

There is no imageless solution to this in the curent Android release, sadly.

How to enable smooth rounded-corners in Android browser?

My experience (across all browsers) is that corners done with border-radius look better if they are an even number of pixels in size.

So border-radius: 10px; looks better than border-radius:9px;

My experience is mainly on desktop browsers, but I can see how this effect might be similar on mobiles.

I wonder if the size of your em unit is a different size between desktop and mobile?

It might be worth your while experimenting with a few different sizes (even pixel-based sizes, just for the experiment), to see what difference they make. It might be that a small change will make a big difference.

border-radius not working in modern native Android browser

Turns out, this issue is specific to the Android browser on the Galaxy S4 and S4 Active. It looks like they've broke support for the condensed border-radius property, but if you specify each corner individually, it works fine. I'm posting a bug report to Android. So, if you do this:

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

It works fine; if you just have border-radius: 10px; it gets ignored.

This was answered under this post:
Galaxy S4 stock browser CSS3 border-radius support?
I'm just repeating it here. But I did test their solution, and it is working fine now on the Galaxy S4 Active as well.

css transform, jagged edges in chrome

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.

-webkit-backface-visibility: hidden;

Android XML rounded clipped corners

What your describing sounds like this:

<LinearLayout android:shape="rounded">
   <LinearLayout android:background="@drawable/pedometer_stats_background">
   </LinearLayout>
</LinearLayout>

And the inner layout is pushing outside the rounded corners because it isn't rounded. You'll have to round the corners of your bitmap. If you have a repeating bitmap you'll want to look at defining a nine-patch drawable. Round your corners then define the portion of the graphic that can expand.

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

It'd be nice if we could just add a bitmap to the shape drawable and have that be applied as a skin over whatever shape we're drawing. And, I bet if you know what your doing you could create a Shape subclass that draws a bitmap, but that's not included in Android out of the box unfortunately.

---

Related Topics