| Summary: | SVG blur applied to <div> shows grid lines | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Ricci Adams <webkit.org> | ||||||
| Component: | SVG | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | RESOLVED CONFIGURATION CHANGED | ||||||||
| Severity: | Normal | CC: | ahmad.saleem792, dino, sabouhallawa, simon.fraser, zimmermann | ||||||
| Priority: | P2 | ||||||||
| Version: | Safari Technology Preview | ||||||||
| Hardware: | Unspecified | ||||||||
| OS: | Unspecified | ||||||||
| Attachments: |
|
||||||||
Created attachment 277884 [details]
Screenshot
Works fine in latest Chrome and Firefox. Why not use CSS filters? filter: blur(4px). 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. 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! |
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.