How to fix PNG image banding on Android Browser (Mobile Website)?

Question

For a mobile website project I encountered a problem that (only on android browser), the gradient to transparency (smooth outer glow) does not look clean. Instead you can see clear edges around it. Strangely though it seems to disappear for as long as I scroll the page.

http://i.stack.imgur.com/qGmXj.png

The problem does not occur on any Desktop Browser or on iOS Devices.

Thanks for your help!

• UPDATE:
  I found out, that the problem is called PNG Banding and only occurs with PNG-24 (24 bit) on the 16bit displays. As I cannot go with an 8-Bit Image (which would render fine) because of the quality loss, I still did not find a solution for the problem

Answer 1

I have also not found a solution to this problem.

In my case, I had a PNG with a white-to-transparent gradient that I would overlay on top of elements with solid background colours to give them a "shine" up top. No matter what I tried, there would always be banding on the Android browser (and no other browsers at all).

Before I even tried the PNG gradient, I tried doing so with CSS3, but that suffered from the same issue.

In the end, I was forced to create opaque PNGs with the white-to-transparent gradient layer merged with the colour layer. This meant I had to do the Photoshop equivalent of "hard-coding" each possible shine/shadow with whatever colour it would be on top of. Not the best solution, but it displays fine on Android browser without any banding and I needed do something , so yeah. :|

Answer 2

In photoshop, Save For Web. Choose PNG-8 bit. Dither Option: choose pattern or noise. This will smooth out the gradient banding.