一段时间以来我遇到了一个问题,Firefox 停止正确解释我的游戏中导航图像的颜色。有一些通常显示为白色的黑暗区域(那些不是透明区域)。
例如production.png
图像现在是白色背景,而search.png
工作正常(透明)
我已经尝试比较 imagemagic 的输出,identify -verbose production.png
但search.png
我没有发现任何线索,这是 diff 输出:
Image: production.png | Image: search.png
Geometry: 39x39+0+0 | Geometry: 40x39+0+0
Pixels: 1521 | Pixels: 1560
mean: 100.691 (0.394867) | mean: 114.719 (0.449879)
standard deviation: 84.552 (0.331576) | standard deviation: 92.5997 (0.363136)
kurtosis: -0.86307 | kurtosis: -1.20889
skewness: 0.600582 | skewness: 0.428943
entropy: 0.626761 | entropy: 0.640743
mean: 199.804 (0.783545) | mean: 195.449 (0.766466)
standard deviation: 100.551 (0.394318) | standard deviation: 103.445 (0.405669)
kurtosis: 0.00158551 | kurtosis: -0.316896
skewness: -1.38079 | skewness: -1.26072
entropy: 0.263538 | entropy: 0.263553
Colors: 320 | Colors: 316
...
Page geometry: 39x39+0+0 | Page geometry: 40x39+0+0
png:IHDR.width,height: 39, 39 | png:IHDR.width,height: 40, 39
signature: 9995b265a15a8c420fb52a3a2394c1 | signature: 55dfc1232b6f0d2684c3ff47e78cfc
filename: production.png | filename: search.png
Filesize: 1386B | Filesize: 1406B
Number pixels: 1521 | Number pixels: 1560
我测试了很多,我不确定它是否与透明度有关,我在这里设置了一个简单的 html-test:
- https://spacetrace.org/error_test.html
仅显示一张黑色部分反转为白色的图像。图像本身还可以: - https://spacetrace.org/pics/navigation/buttons/production.png
现在的代码真的很简单:
<html><head>
<style>
.works,.worksnot{
background-repeat:no-repeat;
height:50px;
background-image:url('pics/navigation/buttons/search.png');
}
.worksnot{
background-image:url('pics/navigation/buttons/production.png');
}
</style>
</head>
<body>
<div class="works"></div>
<div class="worksnot"></div>
<br><br>plain it works:<img src="https://spacetrace.org/pics/navigation/buttons/production.png">
</body></html>
这些是原始文件:
- https://spacetrace.org/pics/navigation/buttons/production.png
- https://spacetrace.org/pics/navigation/buttons/search.png
它们适用于所有浏览器,除了最新的 Android 上的 Firefox(几周前,Android 上的 Firefox 也可以正常工作)。