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