8

Firefox のフィルター css プロパティを印刷ページで適切にグレースケールにする際に問題が発生しました。画面上では期待どおりに表示されますが、なんらかの理由で、グレースケールの画像が印刷物には表示されません。このような質問を参照した後、私はこの点に到達しました (問題を示すために単純化されています):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .grayscale {
                filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
                filter: grayscale(100%);
            }
            img {
                width:100px;
            }
        </style>
    </head>
    <body>
        <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
    </body>
</html>

そして、ここにフィドルがあります

これに対する実行可能な回避策はありますか、それとも何か間違っていますか? フィルターを他の要素に適用すると、同じ問題が発生するようです。建設的なご意見をいただければ幸いです。

注: Firefox v20.0.1 を使用

4

1 に答える 1