IOS safari and Android stock browser don't render transparent pixels in png image

Question

I have a nice semi transparent background image of green flowers that are supposed to neatly wrap around an image. For desktop browsers it works beautifully

but on a mobile platform stock browsers it looks like(this is from when I tried an index PNG, but with a full 24 bit png it renders the same(except with the same smooth white flowers)

The CSS code I use for this is:

body div.econtainer div.makeitnice div.flowers 
    {
    position:absolute;
    top:0px;
    right:30px;
    background:none;
    background-color: transparent;
    background-image: url(images/greenflowers.png);
    width:790px;
    height:200px;
    }

Even if I simply use an <img src="images/greenflowers.png"> it still renders with the white background.

Does anyone know a solution to show semitransparent pngs properly on the stock browsers?

This is btw the transparent png i'm trying to use:

I'm trying to use it on top of this background:

border-bottom-style:solid;
border-bottom-color:#fff;
border-bottom-width:1px;
position:absolute;
top:0px;
left:0px;
width:100%;
height:200px;
max-height:200px;
margin-top:30px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDE3OCwyMDEsMCwxKTsiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDEzMywxNTEsMCwxKTsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);
background-image: linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -o-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -moz-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -webkit-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -ms-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.0, #859700),
    color-stop(0.4, #B2C900)
);

padding:0px;
overflow:visible;
-webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.20);
-moz-box-shadow:    0px 4px 5px rgba(50, 50, 50, 0.20);
box-shadow:         0px 4px 5px rgba(50, 50, 50, 0.20);
}

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...