title: IOS safari and Android stock browser don't render transparent pixels in png image
body: <p>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</p>
  
  <p><img src="https://i.stack.imgur.com/WPAAB.png" alt="Flowers on left and right look good"></p>
  
  <p>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)</p>
  
  <p><img src="https://i.stack.imgur.com/VTheX.png" alt="rendering on IOS and android stock"></p>
  
  <p>The CSS code I use for this is: </p>
  
  <pre><code>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;
      }
  </code></pre>
  
  <p>Even if I simply use an <code>&lt;img src="images/greenflowers.png"&gt;</code> it still renders with the white background.</p>
  
  <p>Does anyone know a solution to show semitransparent pngs properly on the stock browsers?</p>
  
  <p>This is btw the transparent png i'm trying to use:</p>
  
  <p><img src="https://i.stack.imgur.com/tsvNA.png" alt="Greenflowers"></p>
  
  <p>I'm trying to use it on top of this background:</p>
  
  <pre><code>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);
  }
  </code></pre>