Bug 157254 - SVG blur applied to <div> shows grid lines
Summary: SVG blur applied to <div> shows grid lines
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2016-05-01 18:49 PDT by Ricci Adams
Modified: 2016-05-03 18:51 PDT (History)
4 users (show)

See Also:

Example HTML (686 bytes, text/html)
2016-05-01 18:49 PDT, Ricci Adams
no flags Details
Screenshot (166.11 KB, image/png)
2016-05-01 18:49 PDT, Ricci Adams
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ricci Adams 2016-05-01 18:49:10 PDT
Created attachment 277883 [details]
Example HTML

Load the attached example HTML file in Safari 9 or Safari Technical Preview and enlarge the window.

Expected result: solid blurred rectangle with "Hello World" in the center.
Actual result: white grid lines appear in the rectangle.
Comment 1 Ricci Adams 2016-05-01 18:49:35 PDT
Created attachment 277884 [details]
Comment 2 Ricci Adams 2016-05-01 18:50:02 PDT
Works fine in latest Chrome and Firefox.
Comment 3 Simon Fraser (smfr) 2016-05-03 18:42:19 PDT
Why not use CSS filters? filter: blur(4px).
Comment 4 Ricci Adams 2016-05-03 18:51:02 PDT
Thanks! :) CSS filters work great, but I hit this while messing around with SVG filters.  (Specifically, I was hoping to use the edgeMode="duplicate" feature of <feGaussianBlur>).

Even with this fixed, I may use CSS filters anyway - I'm not sure what the performance characteristics of each are.