Bug 177746 – Stacked SVG circle with dash array rendering problem

• Status: RESOLVED
• Resolution: MOVED
• Component: SVG

[AS]

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

[Ahmad Saleem]

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!

[Ahmad Saleem]

I think similar problem but different test case caused similar rendering issues in Chrome as follow - http://crbug.com/843966

[Brent Fulgham]

(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.

[Ahmad Saleem]

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.

[Radar WebKit Bug Importer]

<rdar://problem/97197279>

[Ahmad Saleem]

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!

[Jan Kretschmer]

(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/

[Simon Fraser (smfr)]

(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.

[Simon Fraser (smfr)]

This is a bug in a system framework below webkit.

[Ahmad Saleem]

(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.

[Simon Fraser (smfr)]

Created attachment 463231 [details]
Test case