830089 - CSS SVG grayscale filter is faulty and slow

Status: UNCONFIRMED

(Core :: SVG, defect)

Description

[petri.silen]

Attachment: filter.jpg

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11

Steps to reproduce:

Tried to apply CSS SVG grayscale filter to a set of images using following CSS:

	filter: url(svg/map.svg#grayscale);

And following map.svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     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>


Actual results:

The grayscaling is faulty leaving some vertical "white stripes" in the images. (See attachment) Earlier versions of Firefox don't produce these white stripes. The grayscaling is also very slow compared to earlier version of Firefox. This fault happens at least in Firefox 17.0.1 and Firefox 18.0


Expected results:

No vertical white stripes appearing. Grayscaling should work faster

Comment 1

[Robert Longson [:longsonr]]

Please attach a complete testcase - ideally something minimal.

Comment 2

[petri.silen]

Attachment: Test to repeat the problem: "vertical white stripes"

Here is a test case to repeat the problem.

Comment 3

[Robert Longson [:longsonr]]

Attachment: svg part of testcase

Comment 4

[Robert Longson [:longsonr]]

Attachment: css part of testcase

Comment 5

[Robert Longson [:longsonr]]

Attachment: css part of testcase

Comment 6

[Robert Longson [:longsonr]]

Attachment: html part of testcase

Comment 7

[Robert Longson [:longsonr]]

I don't see any white lines on Firefox 18 on 64 bit Windows 7 with hardware accelerated graphics.

What does the Graphics section of about:support say on your Firefox?

Comment 8

[Robert Longson [:longsonr]]

I do see white lines if I zoom in or out. Is that what you have done?

Does pressing Ctrl+0 to reset the zoom level fix it?

Comment 9

[petri.silen]

(In reply to Robert Longson from comment #7)
> I don't see any white lines on Firefox 18 on 64 bit Windows 7 with hardware
> accelerated graphics.
> 
> What does the Graphics section of about:support say on your Firefox?


It is telling me that GPU accelaration is not in use, because I should upgrade my display driver to new version. I am currently upgrading it and will see if that solves the problem.

Comment 10

[petri.silen]

(In reply to Robert Longson from comment #8)
> I do see white lines if I zoom in or out. Is that what you have done?
> 
> Does pressing Ctrl+0 to reset the zoom level fix it?

It doesn't not have an effect. The images stays exactly the same.

Comment 11

[petri.silen]

It seems that upgrading the graphics driver did not help. Now the the ouput of about:support Graphics section is following:

 Grafiikka

        Ajureiden päiväys
        5-31-2012

        Ajureiden versio
        8.17.12.9688

        Direct2D käytössä
        true

        DirectWrite käytössä
        true (6.1.7601.17789)

        GPU #2 on käytössä
        false

        GPU:lla kiihdytettyjä ikkunoita
        1/1 Direct3D 10

        Laitteen ajurit
        nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um

        Laitteen kuvaus
        NVIDIA Quadro FX 570M

        Laitteen muisti
        256

        Laitteen tunnus
        0x040c

        Myyjän tunnus
        0x10de

        WebGL-mallintaja
        Google Inc. -- ANGLE (NVIDIA Quadro FX 570M)

        AzureCanvasBackend
        direct2d

        AzureContentBackend
        direct2d

        AzureFallbackCanvasBackend
        cairo

Comment 12

[Robert Longson [:longsonr]]

I don't see white lines on unaccelerated Vista either.

Comment 13

[Daniel Holbert [:dholbert]]

I don't see white lines (unless I zoom in/out), either, on Linux nightly.

I briefly suspected that this might be a retina display-dependent issue (since it looks like bug reporter is on a mac), but ehsan & cers tried the testcase on their retina macbooks and didn't see any white lines.

Comment 14

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #13)
> I briefly suspected that this might be a retina display-dependent issue
> (since it looks like bug reporter is on a mac), but ehsan & cers tried the
> testcase on their retina macbooks and didn't see any white lines.

(er, never mind -- I saw "safari" in comment 0 and thought "mac", but now that I look closer, it's Safari-on-Windows. :))  So, I guess that's another reason this isn't related to retina displays... Sorry for my confusion. :)

Comment 15

[Daniel Holbert [:dholbert]]

Petri: So just to confirm -- you see the issue when you view https://bugzilla.mozilla.org/attachment.cgi?id=702247 , correct?

Comment 16

[Robert Longson [:longsonr]]

I don't see any reason for slowness either. The filter bounds are correctly calculated (checked in debugger) and our feColorMatrix implementation has not changed since it was first created in Firefox 3.

Comment 17

[petri.silen]

I have some additional details about this problem. I does not seem to be just my computer. I have witnessed exactly same problem on other PC also running Firefox 18.
Regarding the slowness of CSS SVG grayscale filter, it seems that the filter completes fast if you issue some kind of repaint of the screen. Eg. when I double click on body element or slightly try to scroll the page, then the filtering of individual images to grayscale completes immediately and fast.