Css 过滤xul图像上的灰度将其变成正方形

我正在尝试使用

过滤器：灰度（1）

技术对图像进行灰度化。它在web上运行良好，但当我在XUL图像上尝试它时，它失败了。它把它变成了一个模糊的正方形

这是以前的例子：

以下是：

这是DOM检查的图片，我的元素是匿名元素

有什么想法吗？那太棒了！谢谢

编辑： 我无法获取代码在我的插件外部复制此内容，但以下是代码：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
            <box class="profilist-tbb" >
                <image class="toolbarbutton-icon"  style="list-style-image: url(chrome://browser/skin/places/query.png)"/>
                <image class="profilist-badge"  style="filter:grayscale(1);transform:translate(-7px,14px) scale(.8);" src="chrome://branding/content/icon16.png"/>
                <box flex="1">
                    <stack class="profilist-display-stack" flex="1">
                    <html:input class="profilist-input"  style="display:none" />
                    <label class="toolbarbutton-text" crop="right" flex="1"  value="rawr"/>
                    </stack>
                </box>
            </box>
</window>

---

我还通过在其上方的框元素上放置灰度来解决此问题，使其内部的一切都变成灰度，不仅仅是这个徽章图标，但我将不得不接受它，直到我可以复制它：（

我有一块文本，通常我会从问题所在的位置剪切并粘贴请求代码，但我知道你知道这是必要的，因为这使提供帮助成为可能/更容易，你可以通过回答问题来帮助这里的人。请将问题包括在MCVE中。问题可能是从实现中的错误到a、b但是如果没有代码，我们就不可能复制/测试。谢谢Mayken，我现在将把一些东西放在一起：）虽然探索为什么会发生这种情况是一个好主意，但是您使用

过滤器：灰度（1）有什么原因吗

函数，而不是提供一个预计算过灰化图像的精灵？提供精灵并只是移动图像以显示灰化版本，与动态计算相比，计算强度要小得多。虽然处理量不太大，但在某些情况下，每一点都很重要。您需要将一个已知图像转换为一个已知灰度图像。让一个精灵同时拥有两个图像可能是一个不错的选择（Firefox就是这样做的）。是的，谢谢Mayken的提问。我使用它是因为徽章是由用户提供的，所以他们可以使用任何他们想要的图像：）伙计，我无法复制这一点，这太奇怪了。我从图像元素中删除了滤镜灰度，并将其放在它周围的框中，这会使其他所有内容也变为灰度，但这是唯一不使其变成模糊正方形的方法。我无法复制它，但我发布了我认为应该复制它的代码。您是否有时间安装我的插件并查找复制？我知道如果没有，它将需要聊天室，我有irc和teamviewer，如果你可以：）我要求原始图标，以防阿尔法频道发生奇怪的事情。我对其进行了测试，并按预期应用了过滤器。也许有其他规则在干预？