Closed Bug 772787 Opened 8 years ago Closed 2 years ago

Firefox on Mac OS renders some svg filter effects blurrily


(Core :: SVG, defect)

Not set





(Reporter: cespare, Assigned: u459114)



(1 file)

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:

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

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

Expected results:

I would expect Firefox in Mac OS to render this SVG crisply, the way Firefox in Ubuntu does.
OS: Linux → Mac OS X
Component: Untriaged → SVG
Product: Firefox → Core
Does adding shape-rendering="crispEdges" make any difference?
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):

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).
Does changing the filterRes of the filter help?
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.
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.
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...?
OS: Mac OS X → All
Hardware: x86_64 → All
Version: 13 Branch → Trunk
Actually, is this visible on all platforms. I'm presuming it is - do you see it on Windows, Robert?
@Jonathan -- It renders fine in Ubuntu/FF 12 (and I included a screenshot of that in the original report).
On Win 7, it's normal: (like links 2 & 3) in comment #0.
@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.
Ok, thanks.
OS: All → Mac OS X
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.
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.
Assignee: nobody → cku
confirm fixed by the patch in bug 852100
Closed: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 852100
You need to log in before you can comment on or make changes to this bug.