CSS background of png with semitransparancies transparant on a gradient shows a white background

Question

if you look at this fiddle( http://jsfiddle.net/5ajYD/ ) with an android browser you see that the PNG that makes up the flowers has a white background.

On all other browsers it shows perfectly normal, except the android browser. I've googled on this problem but the only thing I can find is a problem with png banding and related to android app programming.

This reminds me of the issues MSIE 6 has with transparant images, and I find it very strange that this happens.

Does anyone know a fix for this issue on android browsers? I can't use non transparant background because of the gradient differences in different browsers.

What I have tried so far:

• I have already tried using "multiple" backgrounds both posistioned at location 0px 0px, but that doens't work
• I've tried adding a gradient to to the div with the flowers, but that failed too and broke in other browsers.

I find it very mystifying that this kind of issue shows up on a modern browser... even a nokia n95 gets it right....

The android version I’m testing against/found this with is android 2.3.4(Sony Ericsson Xperia Arc S LT18i)

This is what I see with the fiddle in the android browser on the phone

http://t.co/mofPkqjf

Answer 1

I had a big facepalm moment.

I've been battling with this for two months now and I simply couldn't figure out the logic. The problem was in the econtainer element that it had a parameter: width:100%.

What happens is that it only renders the width up to the actual page width of the viewport.

So if you have a browser screen on mobile that's 480px wide, it'll set width to 480px, render a gradient of 480px, and not rerender when you scroll sideways.

The problem was solved by adding a min-width:1200px; and now it renders properly!

Thank you all for looking into this...