RESOLVED CONFIGURATION CHANGED 157254
SVG blur applied to <div> shows grid lines 
https://bugs.webkit.org/show_bug.cgi?id=157254
Summary SVG blur applied to <div> shows grid lines
Ricci Adams
Reported 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.
Attachments
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
View All Add attachment proposed patch, testcase, etc.
Ricci Adams
Comment 1 2016-05-01 18:49:35 PDT
Created attachment 277884 [details] Screenshot
Ricci Adams
Comment 2 2016-05-01 18:50:02 PDT
Works fine in latest Chrome and Firefox.
Simon Fraser (smfr)
Comment 3 2016-05-03 18:42:19 PDT
Why not use CSS filters? filter: blur(4px).
Ricci Adams
Comment 4 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.
Ahmad Saleem
Comment 5 2022-09-03 11:06:16 PDT
I am not able to reproduce the grid lines in Safari 15.6.1 and Safari Technology Preview 152 and tried resizing and maximising using attached "Example HTML". It matches with other browsers (Chrome Canary 107 and Firefox Nightly 106). Since Safari does not show "GRID" lines like one in the reference screenshots. I am going to mark this as "RESOLVED CONFIGURATION CHANGED". Thanks!
Note You need to log in before you can comment on or make changes to this bug.