Bug 273992

Summary: Svg rendering for stroke-dasharray is different across browsers
Product: WebKit Reporter: Karl Dubost <karlcow>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, maggotfish, sabouhallawa, webkit-bug-importer, zimmermann
Priority: P2 Keywords: BrowserCompat, InRadar, LayerBasedSVGEngine, NeedsReduction
Version: Other   
Hardware: Unspecified   
OS: Unspecified   
URL: https://yuanchuan.dev/fun-with-stroke-dasharray
Attachments:
Description Flags
rendering in safari, firefox, chrome none

Karl Dubost
Reported 2024-05-10 01:20:03 PDT
Created attachment 471354 [details] rendering in safari, firefox, chrome Go to https://yuanchuan.dev/fun-with-stroke-dasharray Scroll to Hearts at the corners and notice the difference of rendering in between Firefox, Chrome and Safari. The top left corner heart is rounded. The code example is written in a special syntax provided by https://css-doodle.com/svg/ svg { viewBox: 0 0 10 10 p 2; rect { width, height: 10; fill: none; stroke: #000; stroke-linecap: round; stroke-dasharray: 4 6; stroke-dashoffset: 2; stroke-width: 4; } } To verify if this can be converted into an isolated svg file.
Attachments
rendering in safari, firefox, chrome (548.09 KB, image/png)
2024-05-10 01:20 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-05-10 01:20:37 PDT
<rdar://problem/127866341>
Ahmad Saleem
Comment 2 2024-05-10 04:22:57 PDT
@Karl - I have one similar bug in the past where on the edge, there was corner missing. Will try to find it.
Ahmad Saleem
Comment 3 2024-05-10 04:25:21 PDT
Just to add 'Layer-based SVG Engine' does not fix this, so adding 'LayerBasedSVGEngine' tag.
Note You need to log in before you can comment on or make changes to this bug.