| Summary: | Incorrect rendering of crossing SVG paths when fill is "none" | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | samuel | ||||||
| Component: | SVG | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | RESOLVED MOVED | ||||||||
| Severity: | Normal | CC: | sabouhallawa, webkit-bug-importer, zimmermann | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | Safari 16 | ||||||||
| Hardware: | iPhone / iPad | ||||||||
| OS: | iOS 16 | ||||||||
| Attachments: |
|
||||||||
Created attachment 465003 [details]
Screenshot of the rendering issue
I can reproduce this bug on iOS only. Bug is in a component below WebKit. |
Created attachment 465002 [details] minimal SVG displaying the issue When two paths cross and fill is set to “none” a tiny piece of the background shines through. If the fill-attribute of the path is removed, things are rendered correctly. This seems to only happen if the SVG is placed inside a <button> in the HTML, it doesn't happen when placed in a regular <div>. Have seen the issue in Safari on an iPad with iOS 16.3.1. Does not happen in Safari 16.3 on macOS 13 nor in Epiphany 43, Chrome 110 or Firefox 109 on Fedora 37.