title: Firefox for Android and HTML5 canvas transparency bug
body: <p>Consider this simple webpage:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;style type="text/css"&gt;
          canvas { border: 1px solid black; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas width="100" height="100" id="the-canvas"&gt;&lt;/canvas&gt;
      &lt;script type="text/javascript"&gt;
          var canvas = document.getElementById('the-canvas');
          var context = canvas.getContext('2d');
          context.fillStyle = 'rgba(0, 0, 255, 0.5)';
          context.fillRect(0, 0, 100, 100);
      &lt;/script&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  
  
  <p>Basically, it contains only one <code>&lt;canvas/&gt;</code> element that has semi-transparent blue background. The expected behavior is to have it rendered in light blue color, since the background of the web page is white.</p>
  
  <p>It renders fine on the desktop machine.</p>
  
  <p>On Android it renders fine as well, except for Firefox, where it acts like the page underneath canvas was actually.. black. <strong>The strangest thing</strong> is that it acts like it <strong>only</strong> if there is any part of Firefox's interface visible on the screen!</p>
  
  <p>Examples below.</p>
  
  <p>Good behavior - color is light blue. No parts of Firefox's interface are visible.
  <img src="https://i.stack.imgur.com/3tbb9.png" alt="Good behavior"></p>
  
  <hr>
  
  <p>Wrong behavior - the resulting color suddenly gets way too dark. Note that Firefox's interface comes into view as I sweep my screen to see the address bar.</p>
  
  <h2><img src="https://i.stack.imgur.com/9MIU2.png" alt="Wrong behavior"></h2>
  
  <p>Here's another example; this time I try to render corny snow animation to celebrate incoming Christmas. To do that, I render small opaque circles on transparent canvas. Version on the left - Firefox interface visible, circles have ugly anti-aliasing problems; version on the right - the same page after scrolling a bit down, circles are rendered correctly.</p>
  
  <p><img src="https://i.stack.imgur.com/zxFOa.png" alt="Another example"></p>
  
  <p>I tried to use various <a href="http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/" rel="nofollow noreferrer">blending features</a> to get around this, but without success.</p>