Bug 252320

Summary: Incorrect rendering of crossing SVG paths when fill is "none"
Product: WebKit Reporter: samuel
Component: SVGAssignee: 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:
Description Flags
minimal SVG displaying the issue
none
Screenshot of the rendering issue none

samuel
Reported 2023-02-15 09:43:54 PST
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.
Attachments
minimal SVG displaying the issue (337 bytes, text/html)
2023-02-15 09:43 PST, samuel 		no flags
Details
Screenshot of the rendering issue (43.92 KB, image/png)
2023-02-15 09:48 PST, samuel 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
samuel
Comment 1 2023-02-15 09:48:03 PST
Created attachment 465003 [details] Screenshot of the rendering issue
Radar WebKit Bug Importer
Comment 2 2023-02-22 09:44:19 PST
<rdar://problem/105783947>
Said Abou-Hallawa
Comment 3 2023-02-23 09:34:29 PST
I can reproduce this bug on iOS only. Bug is in a component below WebKit.
Note You need to log in before you can comment on or make changes to this bug.