Bug 252320 - Incorrect rendering of crossing SVG paths when fill is "none"
Summary: Incorrect rendering of crossing SVG paths when fill is "none"
Status: RESOLVED MOVED
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 16
Hardware: iPhone / iPad iOS 16
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-02-15 09:43 PST by samuel
Modified: 2023-02-23 09:34 PST (History)
3 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description samuel 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.
Comment 1 samuel 2023-02-15 09:48:03 PST 
Created attachment 465003 [details]
Screenshot of the rendering issue
Comment 2 Radar WebKit Bug Importer 2023-02-22 09:44:19 PST 
<rdar://problem/105783947>
Comment 3 Said Abou-Hallawa 2023-02-23 09:34:29 PST 
I can reproduce this bug on iOS only. Bug is in a component below WebKit.