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

StackOverflow https://stackoverflow.com/questions/11329228

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

Était-ce utile?

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

Autres conseils

Use HTML5 Canvas to create an alphaJPEG, a JPEG layered under an equivalent PNG with an alpha channel.

<head>
  <style>img[data-alpha-src]{visibility: hidden;}</style>
</head>
<body>
  <img src="image.jpg" data-alpha-src="alpha.png" />
  <!--...-->
  <script src="ajpeg.js"></script>
</body>

ajpeg.js

(function() {

  var create_alpha_jpeg = function(img) {

    var alpha_path = img.getAttribute('data-alpha-src')
    if(!alpha_path) return

    // Hide the original un-alpha'd
    img.style.visiblity = 'hidden'

    // Preload the un-alpha'd image
    var image = document.createElement('img')
    image.src = img.src
    image.onload = function () {

      // Then preload alpha mask
      var alpha = document.createElement('img')
      alpha.src = alpha_path
      alpha.onload = function () {

        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        img.parentNode.replaceChild(canvas, img)

        // For IE7/8
        if(typeof FlashCanvas != 'undefined') FlashCanvas.initElement(canvas)

        // Canvas compositing code
        var context = canvas.getContext('2d')
        context.clearRect(0, 0, image.width, image.height)
        context.drawImage(image, 0, 0, image.width, image.height)
        context.globalCompositeOperation = 'xor'
        context.drawImage(alpha, 0, 0, image.width, image.height)

      }
    }
  }

  // Apply this technique to every image on the page once DOM is ready
  // (I just placed it at the bottom of the page for brevity)
  var imgs = document.getElementsByTagName('img')
  for(var i = 0; i &lt; imgs.length; i++)
    create_alpha_jpeg(imgs[i])

})();

In the head element I linked to FlashCanvas:

<!--[if lte IE 8]><script src="flashcanvas.js"></script><![endif]-->

... and I threw in this to avoid a flicker of the un-alpha’d JPEG:
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top