Bug 177746

Summary: Stacked SVG circle with dash array rendering problem
Product: WebKit Reporter: AS <abdi.saeed2009>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: RESOLVED MOVED    
Severity: Major CC: ahmad.saleem792, bfulgham, rniwa, sabouhallawa, sijakret, simon.fraser, webkit-bug-importer, zalan, zimmermann
Priority: P2 Keywords: InRadar
Version: Safari 11   
Hardware: Mac   
OS: macOS 10.12   
See Also: https://bugs.webkit.org/show_bug.cgi?id=174417
Attachments:
Description Flags
Rendering problem
none
Test case none

Description AS 2017-10-02 08:57:08 PDT
Created attachment 322379 [details]
Rendering problem

Really hard to describe but given the following SVG

<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
 <circle cx="27" cy="27" r="25" fill="#293741" fill-opacity=".75" stroke-width="4"></circle>
 <circle cx="27" cy="27" r="25" fill="transparent" stroke-width="4" stroke-dasharray="156.067915 0" stroke-dashoffset="39.0169787" class="one"></circle>
 <circle cx="27" cy="27" r="25" fill="transparent" stroke-width="4" stroke-dasharray="0 156.067915" stroke-dashoffset="0" class="two"></circle>
 <circle cx="27" cy="27" r="25" fill="transparent" fill-opacity=".75" stroke-width="4" stroke-dasharray="0 156.067915" stroke-dashoffset="0" class="three"></circle>
</svg>

With the following CSS

svg {
    width: 700px;
    height: 700px;
}
svg .one {
    stroke: green;
}
svg .two {
    stroke: yellow;
}
svg .three {
    stroke: blue;
}

I am getting the rendering issue, shown in the attachement
Comment 1 Ahmad Saleem 2022-06-08 15:03:49 PDT
I am still able to reproduce this bug as shown in picture based on test case provided in Comment 01 using Safari 15.5 on macOS 12.4

Link - https://jsfiddle.net/0efk1c4d/show/

Both Chrome Canary 104 and Firefox Nightly 103 render test case fine without those two lines. Thanks!
Comment 2 Ahmad Saleem 2022-06-08 15:27:25 PDT
I think similar problem but different test case caused similar rendering issues in Chrome as follow - http://crbug.com/843966
Comment 3 Brent Fulgham 2022-07-15 16:26:20 PDT
(In reply to Ahmad Saleem from comment #1)
> I am still able to reproduce this bug as shown in picture based on test case
> provided in Comment 01 using Safari 15.5 on macOS 12.4
> 
> Link - https://jsfiddle.net/0efk1c4d/show/
> 
> Both Chrome Canary 104 and Firefox Nightly 103 render test case fine without
> those two lines. Thanks!

I do not see the lines on Safari 16 (macO 13 Beta) on an M1 MacBook Air.

I wonder if this is fixed in the new OS, or if it is an Intel-specific issue.
Comment 4 Ahmad Saleem 2022-07-18 07:40:25 PDT
Just to update that I am using M1 Pro (14 inch) machine as well and this is reproducible in Safari 16 build of Technology Preview 149 as well on macOS 12.14.

If Safari was relying on some OS layer frameworks or library which is now updated in macOS Ventura than it might be the case.
Comment 5 Radar WebKit Bug Importer 2022-07-18 07:45:06 PDT
<rdar://problem/97197279>
Comment 6 Ahmad Saleem 2022-07-19 04:54:09 PDT
I think Bug 174417 is similar to this since both show rendering problem by showing lines. Appreciate if someone can confirm, if they are duplicate then, once can be closed and referred to other. Thanks!
Comment 7 Jan Kretschmer 2022-08-02 02:35:43 PDT
(In reply to Ahmad Saleem from comment #4)
> Just to update that I am using M1 Pro (14 inch) machine as well and this is
> reproducible in Safari 16 build of Technology Preview 149 as well on macOS
> 12.14.
> 
> If Safari was relying on some OS layer frameworks or library which is now
> updated in macOS Ventura than it might be the case.


We are also observing this:

This fiddle illustrates your problem

with certain dash arrays (width 0 + round caps) the dashes disappear in ios16 dev beta 16, in ios 15 and all other browsers they show. Looks to me like a regression.

https://jsfiddle.net/5ubwgjkf/8/
Comment 8 Simon Fraser (smfr) 2022-08-02 09:47:31 PDT
(In reply to Jan Kretschmer from comment #7)
> (In reply to Ahmad Saleem from comment #4)
> > Just to update that I am using M1 Pro (14 inch) machine as well and this is
> > reproducible in Safari 16 build of Technology Preview 149 as well on macOS
> > 12.14.
> > 
> > If Safari was relying on some OS layer frameworks or library which is now
> > updated in macOS Ventura than it might be the case.
> 
> 
> We are also observing this:
> 
> This fiddle illustrates your problem
> 
> with certain dash arrays (width 0 + round caps) the dashes disappear in
> ios16 dev beta 16, in ios 15 and all other browsers they show. Looks to me
> like a regression.
> 
> https://jsfiddle.net/5ubwgjkf/8/

This case is somewhat different and I've filed an internal bug for it.
Comment 9 Simon Fraser (smfr) 2022-08-05 13:09:17 PDT
This is a bug in a system framework below webkit.
Comment 10 Ahmad Saleem 2022-10-24 15:02:38 PDT
(In reply to Ahmad Saleem from comment #1)
> I am still able to reproduce this bug as shown in picture based on test case
> provided in Comment 01 using Safari 15.5 on macOS 12.4
> 
> Link - https://jsfiddle.net/0efk1c4d/show/
> 
> Both Chrome Canary 104 and Firefox Nightly 103 render test case fine without
> those two lines. Thanks!

Just to confirm - macOS Ventura did fix this for me. I don't see two lines, which were present as "Rendering problem" in reference picture attached.
Comment 11 Simon Fraser (smfr) 2022-10-25 10:56:31 PDT
Created attachment 463231 [details]
Test case