Question

考虑这个简单的网页：

<!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的界面没有任何部分可见。 Good behavior

错误的行为 - 由此产生的颜色突然变得太暗。请注意，当我扫描屏幕以查看地址栏时，Firefox的界面会进入视图。

这是另一个例子;这次我尝试渲染老式雪花动画来庆祝圣诞节来临。为此，我在透明画布上渲染小的不透明圆圈。左侧版本 - Firefox界面可见，圆圈具有难看的抗锯齿问题;右边的版本 - 向下滚动一页后，圆圈被正确渲染。

Another example

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

Answer 1

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

Firefox for Android和HTML5 canvas透明度错误

1 个答案: