css png background-image linear-gradients png-24

CSS background of png with semitransparencies transparent on a gradient shows a white background

If you look at this Fiddle 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 searched 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 transparent 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 a non-transparent background because of the gradient differences in different browsers.

What I have tried so far:

I have already tried using “multiple” backgrounds both positioned at location 0px 0px, but that doesn’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 is Android 2.3.4 (Sony Ericsson Xperia Arc S LT18i).

        $(function(){
        $('#photobox img:gt(0)').hide();
        setInterval(function(){
          $('#photobox :first-child').fadeOut(1500)
             .next('#photobox img').fadeIn(1500)
             .end().appendTo('#photobox');
             }, 
          5000);
        });

body div.econtainer {
    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)
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B2C900', endColorstr='#859700',GradientType=0 ); /* IE6-8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#B2C900,EndColorStr=#859700)"
    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);
    }
body div.econtainer div.makeitnice {
position:relative;
width:890px;
max-width:1200px;
min-width:1200px;
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
overflow:visible
}
body div.econtainer div.makeitnice div.flowers {
position:absolute;
top:0px;
right:30px;
background-color: transparent;
background-image: url(http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/greenflowers.png);
width:790px;
height:200px;
}
body div.econtainer div.makeitnice div.handtekening {
position:absolute;
width:314px;
height:69px;
left:161px;
top:114px;
background-image:url(http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/handtekening.png);
}
body div.econtainer div.makeitnice div#quote  h3{
position:absolute;
width:314px;
left:161px;
top:10px;
color:#FFF;
font-family: "Helvetica Neue",Helvetica, Trebuchet MS, Verdana, sans, tahoma, arial;
font-size:14pt;
font-weight:100;
}
body div.econtainer div.makeitnice div.photoframe {
position:absolute;
top:-30px;
right:140px;
background-color:#FFF;
width:556px;
height:364px;
min-width:556px;
min-height:364px;
max-width:556px;
max-height:364px;
}
body div.econtainer div.makeitnice div.photoframeshadow {
background-image: url(http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/photoframeshadow.png);
position:absolute;
top:-30px;
right:121px;
width:590px;
z-index:-100;
height:401px;
min-width:590px;
min-height:401px;
max-width:590px;
max-height:401px;
}
body div.econtainer div.makeitnice div.photoframe div.photoshow {
position:relative;
}
body div.econtainer div.makeitnice div.photoshow  img {
position:absolute;top:0px;
left:10px;right:10px;
width:536px;
height:355px;
}

<div class="econtainer">
    <!--- relative positioning -->
    <div class="makeitnice" style="z-index:1">
        <div class="flowers" style="z-index:2">
        </div>
        <div class="handtekening" style="z-index:2">
        </div>
        <div id="quote" style="z-index:3">
        <h3>“abcdefghijklmn alsdjkflk asldfjalsdjf asldkjfalsdfjla”</h3>
        </div>
        <div class="photoframeshadow" style="z-index:2">
        </div>
        <div class="photoframe" style="z-index:2">
        <div id="photobox" class="photoshow" style="z-index:3">
        <img src="http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/elsedien3.jpg" style="display: block; opacity: 0.10364229403728825; "><img src="http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/elsedien4.jpg" style="display: none; "><img src="http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/elsedien1.jpg" style="display: none; "><img src="http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/elsedien2.jpg" style="display: block; opacity: 0.8963577059627117; "></div>

        </div>
    <!-- end of relative positioning -->
    </div>
<!-- End of green bar -->

</div>

This is what I see with the Fiddle in the Android browser on the phone:

Solution

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