Firefox фильтрует оттенки серого и печать

У меня возникла проблема с правильным отображением свойства css фильтра Firefox в оттенках серого на распечатанной странице. По какой-то причине изображение в оттенках серого не отображается на распечатке, хотя на экране оно отображается должным образом. Ссылаясь на такие вопросы, как этот, я дошел до этой точки ( упрощено, чтобы продемонстрировать проблему):

<!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


filter css firefox grayscale
person dasch88    schedule 06.05.2013    source источник
comment
+1 за умение правильно задать сложный вопрос.   -  person Steve Wellens    schedule 06.05.2013
comment
Чтобы уточнить, когда вы просматриваете на экране изображение в оттенках серого, но когда вы распечатываете содержимое экрана, оттенки серого не применяются к напечатанному изображению (на бумаге?).   -  person jezzipin    schedule 08.05.2013
comment
Близко, скорее изображение в оттенках серого вообще не видно. Например, даже при печати самой страницы скрипта будет отображаться только цветное изображение, в то время как изображение в градациях серого не отображается (хотя пространство макета все еще сохраняется).   -  person dasch88    schedule 08.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

Оказывается, это похоже на ошибку браузера в FireFox. Я заметил, что в любое время (на экране), когда имеется ссылка на svg, которую браузер не может найти, я получаю ту же проблему, что и при печати: макет изображения будет зарезервирован, но это будет пустое пространство. Это побудило меня задуматься, есть ли разница в том, что можно загрузить / найти при рендеринге для принтера, а не экрана, поэтому я начал пробовать разные способы загрузки / ссылки на svg. Я попытался загрузить svg из отдельного файла, из идентификатора в html и встроенного, все в сочетании с определением фильтра в отдельном файле CSS, внутристраничных классов и встроенных стилей. Из всех комбинаций вот что сработало:

Определите svg в html и ссылайтесь на него, используя встроенные стили или внутристраничные классы CSS.

Я знаю, это звучит странно, но буквально все, что я пробовал, ломается, в том числе делать все то же самое, но устанавливать свойство фильтра css во внешнем файле css. Следуя подходу внутристраничного класса, вот как будет выглядеть фиксированный HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .grayscale {
                filter: url(#grayscale); /* Firefox 10+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
            }
            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" />
        <svg xmlns='http://www.w3.org/2000/svg' height="0px">
            <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>
    </body>
</html>

И снова модифицированная скрипка, из которой вы можете распечатать и теперь прекрасно видите изображение в Firefox.

Siiigh, это то, чего я ожидал от IE ... надеюсь, это поможет кому-то сэкономить время / горе / мысли об убийстве

person dasch88    schedule 09.05.2013
comment
К сожалению, в Chrome 43 под Linux ни одна скрипка не распечатывает изображение в оттенках серого. - person Daniel Darabos; 04.05.2015