772787 - Firefox on Mac OS renders some svg filter effects blurrily

Status: RESOLVED DUPLICATE of bug 852100

(Core :: SVG, defect)

Description

[Caleb Spare]

Attachment: SVG file demonstrating the issue

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5

Steps to reproduce:

I'm trying to create SVGs with 1px strokes and drop shadows. I want the shapes to be crisp. I've taken care to pixel align the SVGs themselves and then align the groups up to 0.5px boundaries so that 1px strokes will render crisply.

The issue occurs when I try to add a drop shadow with a filter, or even just use a filter at all.

See the attached svg file for a representative example of the issue.


Actual results:

When I add a drop shadow using a filter, the shapes render blurrily on Firefox in Mac OS. My example file contains three rects: the first has no filter applied, and is crisp; the second has a trivial filter with an feMerge, and is is blurry; the third has a full drop shadow (feGaussianBlur and feOffset as well as feMerge) and is also blurry.

I've only seen this issue with Firefox 13 on Mac OS. (I believe it occurred with some previous versions as well). It renders as expected with Firefox 12 on Linux (Ubuntu).

Here is a screenshot of the badly rendered svg in Mac OS/Firefox 13:

http://i.imgur.com/7WxI8.png

Here is a screenshot of the properly rendered svg in Mac OS/Chrome 20:

http://i.imgur.com/HEwsq.png

Here is a screenshot of the properly rendered svg in Ubuntu/Firefox 12:

http://i.imgur.com/czKP2.png


Expected results:

I would expect Firefox in Mac OS to render this SVG crisply, the way Firefox in Ubuntu does.

Comment 1

[Robert Longson [:longsonr]]

Does adding shape-rendering="crispEdges" make any difference?

https://developer.mozilla.org/en/SVG/Attribute/shape-rendering

Comment 2

[Caleb Spare]

No, it's still blurry. Furthermore, that's not generally a viable solution. That's why included rounded corners in this example -- if you have rounded edges, you can't use shape-rendering="crispEdges" or rounded parts look atrocious.

Here's a screenshot (Firefox 13.0.1, Mac OS):

http://i.imgur.com/IQfDl.png

I bumped up the corner radius from 2 to 4 to show how the rounded corners look janky when rendering with shape-rendering="crispEdges" (see the left-most box, which is rendered without the blurriness bug).

Comment 3

[Robert Longson [:longsonr]]

Does changing the filterRes of the filter help?

https://developer.mozilla.org/en/SVG/Attribute/filterRes

Comment 4

[Caleb Spare]

Nope, I tried that too. The filterRes in my example is already set to 100, which is way higher than it should have to be a few 20x20 rects (right?). I tried making it super high (up to 1000) and it looks the same.

Comment 5

[Robert Longson [:longsonr]]

If you omit filterRes gecko will try to calculate an optimal resolution. Might be worth trying that and/or setting the filter width, height, x, y to px values rather than percentages so that there's no rounding of the filter surface co-ordinates.

Comment 6

[Jonathan Watt [:jwatt]]

Hmm. Seems like our code to snap the filter-space filter region out to filter device pixels isn't enough. It looks like we should also do something to actually align it with the device it's going to be composited into. We may need some heuristic to determine when we should do that though, because for some silly values of filterRes it could be noticeably moved, which would be bad. Maybe we shouldn't care about silly values of filterRes though...?

Comment 7

[Jonathan Watt [:jwatt]]

Actually, is this visible on all platforms. I'm presuming it is - do you see it on Windows, Robert?

Comment 8

[Caleb Spare]

@Jonathan -- It renders fine in Ubuntu/FF 12 (and I included a screenshot of that in the original report).

Comment 9

[Loic]

On Win 7, it's normal: http://i.imgur.com/ta5gY.png (like links 2 & 3) in comment #0.

Comment 10

[Caleb Spare]

@Robert -- I tried setting/unsetting filterRes in all combinations with setting x, y, width, and height to px values and only succeeded in making it look worse.

Comment 11

[Jonathan Watt [:jwatt]]

Ok, thanks.

Comment 12

[Thomas Bachem]

Noticed the same issue on Mac OS X 10.8 with Firefox 18.0.2. Works fine on Windows 7.

BUT: When displayed on my MacBook Pro Retina display, it's crisp. Just blurry on the 72 DPI screen.

Comment 13

[espen]

Time to revive this bug, I think. Although my problem isn't with Mac OS. I am able to reproduce the problem in my own SVGs and in the original attached SVG on Firefox 33.1.1 and FirefoxDevEd 35.0a2, both on Windows 8.1 and non-retina monitor. All the other major Windows browsers displays the SVG nice and sharp. As does all browsers, including Firefox, on retina monitors in both Windows and Mac OS. Haven't been able to test it on Mac OS non-retina.

Comment 14

[u459114]

confirm fixed by the patch in bug 852100