Bug 57112 - SVG shadow filter (feGaussianBlur) adds shadow of the bounding box
Summary: SVG shadow filter (feGaussianBlur) adds shadow of the bounding box
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-03-25 12:03 PDT by Yoah Bar-David
Modified: 2014-03-02 10:24 PST (History)
9 users (show)

See Also:


Attachments
Simple example to recreate the bug (430 bytes, text/html)
2011-03-25 12:04 PDT, Yoah Bar-David
no flags Details
Screenshot on Chrome 13. Notice the shadow is of the bounding box on the right and bottom, it should not be there (19.25 KB, image/png)
2011-06-02 06:40 PDT, Yoah Bar-David
no flags Details
Reduced case with just blur (287 bytes, text/html)
2011-06-04 22:44 PDT, Yoah Bar-David
no flags Details
Screenshot of the reduced case with only blur (2.62 KB, image/png)
2011-06-04 22:46 PDT, Yoah Bar-David
no flags Details
Reduced test case without blur (460 bytes, image/svg+xml)
2011-11-19 10:17 PST, Yuta Kitamura
no flags Details
Screenshot of "Reduced test case without blur" (952 bytes, image/png)
2011-11-19 10:22 PST, Yuta Kitamura
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Yoah Bar-David 2011-03-25 12:03:30 PDT
When using an avg shadow filter (feGaussianBlur), a shadow is also added to the bounding box of the path (it shouldn't be there).
In the attached example, the vertical and horizontal shadows are wrong.
Firefox (4) renders this well.
Comment 1 Yoah Bar-David 2011-03-25 12:04:29 PDT
Created attachment 86968 [details]
Simple example to recreate the bug
Comment 2 Dirk Schulze 2011-03-25 13:46:02 PDT
I can't reproduce it. Works here for me. Can you give more informations about the platform and the version of webkit you are using please?
Comment 3 Dirk Schulze 2011-05-22 03:17:06 PDT
Yoah any news? A screenshot would be useful too.
Comment 4 Yoah Bar-David 2011-05-29 11:57:51 PDT
I tested it now again on Chrome 13 (dev) on Windows, and I can recreate the problem. I don't have current access nightly or Safari, so can't test there
Comment 5 Zoltan Herczeg 2011-05-29 15:29:27 PDT
Could you attach a screenshot? This might be a platform specific issue.
Comment 6 Yoah Bar-David 2011-06-02 06:40:16 PDT
Created attachment 95758 [details]
Screenshot on Chrome 13. Notice the shadow is of the bounding box on the right and bottom, it should not be there
Comment 7 Dirk Schulze 2011-06-02 06:50:47 PDT
(In reply to comment #6)
> Created an attachment (id=95758) [details]
> Screenshot on Chrome 13. Notice the shadow is of the bounding box on the right and bottom, it should not be there

Can confirm it with another Skia based browser. Maybe just Skia related? Can someone of the Gtk or Qt guys reproduce it on their systems?

Adding more people that may can test it on other platforms.
Comment 8 Rob Buis 2011-06-02 07:09:46 PDT
Hi Dirk,

(In reply to comment #7)
> (In reply to comment #6)
> > Created an attachment (id=95758) [details] [details]
> > Screenshot on Chrome 13. Notice the shadow is of the bounding box on the right and bottom, it should not be there
> 
> Can confirm it with another Skia based browser. Maybe just Skia related? Can someone of the Gtk or Qt guys reproduce it on their systems?
> 
> Adding more people that may can test it on other platforms.

Looks fine with Safari.
Cheers,

Rob.
Comment 9 Zoltan Herczeg 2011-06-02 08:56:24 PDT
Just for curiousity, what does happen, if you keep only the feGaussianBlur filter, and disable the other two filters (offset and blend)? The issue is still there?
Comment 10 Yoah Bar-David 2011-06-04 22:43:41 PDT
(In reply to comment #9)
> Just for curiousity, what does happen, if you keep only the feGaussianBlur filter, and disable the other two filters (offset and blend)? The issue is still there?

Yes, the issues is still there, the blur is applied to the right and bottom of the bounding box. I'll attach source and screenshot
Comment 11 Yoah Bar-David 2011-06-04 22:44:32 PDT
Created attachment 96046 [details]
Reduced case with just blur
Comment 12 Yoah Bar-David 2011-06-04 22:46:13 PDT
Created attachment 96047 [details]
Screenshot of the reduced case with only blur
Comment 13 Dirk Schulze 2011-06-05 00:29:49 PDT
(In reply to comment #11)
> Created an attachment (id=96046) [details]
> Reduced case with just blur

I have two questions. Could you help me testing please?

First: I'd like to know which color the shadows have, if you use SourceGraphic instead of SourceAlpha.

Second: Do you see the shadowed border on using <filter filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%" id="drop-shadow">? You may have to change the values of stdDeviation as well.
Comment 14 gianna.mauro+bugzilla 2011-07-29 07:45:51 PDT
(In reply to comment #13)

First: The line and shadow are both red, if SourceGraphic is used instead. Also, the bounding box shadow no longer appears when SourceGraphic is used.

Second:
When I changed the filter to 
<filter filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" id="drop-shadow">
		<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
	</filter>
I no longer saw the bounding box shadow. However, the ends of the line were clipped.
I also tried different values for stdDeviation, the only affect this had was to adjust the amount of blur, as expected.

I also tried
<filter filterUnits="objectBoundingBox" x="-10%" y="-10%" width="120%" height="120%" id="drop-shadow">
		<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
	</filter>
This gave the same results as the original bug. (Reduced case with just blur).
Comment 15 Yuta Kitamura 2011-11-19 10:14:45 PST
I hit the same problem on Linux Chromium.

My observations:
- SourceAlpha sometimes contains the right and bottom borders of the bounding box of the target shape. <feGaussianFilter> is not necessary to reproduce this issue.
- If you replace SourceAlpha with SourceGraphic, the problem goes away.
- This issue depends on the size of the image; if you resize the image (by hitting Ctrl+[+/-] key), the wrong borders may appear or disappear.
Comment 16 Yuta Kitamura 2011-11-19 10:17:08 PST
Created attachment 115954 [details]
Reduced test case without blur
Comment 17 Yuta Kitamura 2011-11-19 10:22:00 PST
Created attachment 115955 [details]
Screenshot of "Reduced test case without blur"
Comment 18 Dirk Schulze 2014-03-02 10:24:20 PST
Chromium only bug