Firefox for Android 和 HTML5 画布透明度错误答案

【问题标题】：Firefox for Android and HTML5 canvas transparency bugFirefox for Android 和 HTML5 画布透明度错误
【发布时间】：2014-01-11 04:31:02
【问题描述】：

考虑这个简单的网页：

<!DOCTYPE html><html>
<head>
    <title>test</title>
    <style type="text/css">
        canvas { border: 1px solid black; }
    </style>
</head>
<body>
    <canvas width="100" height="100" id="the-canvas"></canvas>
    <script type="text/javascript">
        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);
    </script>
</body></html>

基本上，它只包含一个具有半透明蓝色背景的<canvas/> 元素。预期的行为是将其呈现为浅蓝色，因为网页的背景是白色的。

它在台式机上呈现良好。

在 Android 上它也可以很好地呈现，除了 Firefox，它的行为就像画布下面的页面实际上是……黑色的。 最奇怪的事情是它的行为就像只有如果屏幕上可以看到 Firefox 界面的任何部分！

以下示例。

良好的行为 - 颜色是浅蓝色。 Firefox 界面的任何部分均不可见。

错误行为 - 结果颜色突然变得太暗。请注意，当我扫过屏幕查看地址栏时，Firefox 的界面就会出现。

这是另一个例子；这次我尝试渲染老土的雪动画来庆祝即将到来的圣诞节。为此，我在透明画布上渲染小的不透明圆圈。左侧版本 - Firefox 界面可见，圆圈有丑陋的抗锯齿问题；右侧的版本 - 向下滚动一点后的同一页面，圆圈正确呈现。

我尝试使用各种blending features 来解决这个问题，但没有成功。

【问题讨论】：

您是否尝试明确设置 CSS 样式 body: { background-color:#ffffff; }？
是的。不幸的是，它并不能解决问题。将其设置为其他颜色，例如 #f00，会产生相同的行为。
将画布放在不透明的<div> 上会发生什么？设置画布本身的背景颜色是一个选项吗？
如果它是一个选项我会很高兴，但透明度在我的用例中至关重要（参见雪花示例 - 它们应该覆盖网页）。将背景颜色设置为底层<div> 与将背景设置为<body> 并没有太大区别，并且检查它表明它不起作用。当然，我可以求助于从画布切换到其他东西，但是让这段代码工作会很好，因为它已经在其他任何地方工作了。

标签： android html firefox html5-canvas

【解决方案1】：

只是想知道这是一个“网络安全”的颜色问题！

【讨论】：