CSS过滤器样式的顺序仅影响移动设备上的背景图像

Question

我已经创建了一个示例here。它应该显示灰度图像。 CSS过滤器将彩色图像转换为灰度。这适用于我的桌面（safari和chrome浏览器），但不适用于我的手机（Safari和Chrome浏览器） - 图像以彩色显示。但是，如果我交换CSS底部两行的顺序，那就给出：

var th = ['', 'thousand', 'million', 'billion', 'trillion'];
var dg = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var tn = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
var tw = ['twenty-', 'thirty-', 'forty-', 'fifty-', 'sixty-', 'seventy-', 'eighty-', 'ninety-'];

function toWords(s) {
    s = s.toString();
    s = s.replace(/[\, ]/g, '');
    if (s != parseFloat(s)) return 'not a number';
    var x = s.indexOf('.');
    if (x == -1) x = s.length;
    if (x > 15) return 'too big';
    var n = s.split('');
    var str = '';
    var sk = 0;
    for (var i = 0; i < x; i++) {
        if ((x - i) % 3 == 2) {
            if (n[i] == '1') {
                str += tn[Number(n[i + 1])] + ' ';
                i++;
                sk = 1;
            } else if (n[i] != 0) {
                str += tw[n[i] - 2] + ' ';
                sk = 1;
            }
        } else if (n[i] != 0) {
            str += dg[n[i]] + ' ';
            if ((x - i) % 3 == 0) str += 'hundred ';
            sk = 1;
        }
        if ((x - i) % 3 == 1) {
            if (sk) str += th[(x - i - 1) / 3] + ' ';
            sk = 0;
        }
    }
    if (x != s.length) {
        var y = s.length;
        str += 'point ';
        for (var i = x + 1; i < y; i++) str += dg[n[i]] + ' ';
    }
    final = str.replace(/\s+/g, ' ').replace(/- /g, '-');
    if (final.substring(final.length-1) == "-"){
        final = final.substring(0, final.length-1);
    }
    return final;
}

var i;
for (i = 15; i < 25; i++) {
    document.write(toWords(i) + '<br>');
}

document.write(toWords(2745635) + '<br>');

然后图像在我的手机和桌面上神奇地以灰度显示。为什么订单在我的手机上很重要，而不是我的桌面？

完整代码 -

HTML：

filter: url(desaturate.svg#greyscale);
filter: grayscale(100%);

CSS：

<div class="gray" style="background-image: url(http://i.imgur.com/zDPDlNd.jpg)"></div>