在xul图像上过滤灰度使其变为正方形

Question

我正在尝试使用filter:grayscale(1)技术来对图像进行灰度图像处理。它在网络上运行良好但是当我在我的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>

我还通过将灰度放在它上方的盒子元素上来解决这个问题，这使得所有内容都在灰度级内，而不仅仅是这个徽章图标，但我必须忍受它直到我可以复制它：（