Bug 277624 – REGRESSION (269500@main Safari 17.5): Masked Curved Line Rendering Issue

• Status: RESOLVED
• Resolution: FIXED
• Component: SVG

[Sam]

Created attachment 472061 [details]
The screenshot to demo what I mean

Hi WebKit Team,

I am experiencing an issue with Safari 17.5 where a curved line rendered using the C command in an SVG path is cut off when a mask is applied. The problem occurs under specific conditions with certain path coordinates.

Issue Details:

- The curved line is cut off when using the mask.
- The issue disappears if the mask is removed.
- Modifying the cubic path coordinates slightly (e.g., changing from -140.0679 to -140.0678) resolves the rendering problem.

```
<style>
  .line {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    min-height: 1px;
    min-width: 1px;
    stroke: red;
    fill: red;
  }
</style>

<svg class="line" style="top: 50px; left: 50px;">
  <defs>
    <mask id="__id121" maskUnits="userSpaceOnUse" x="-8" y="-8" width="266" height="457">
      <rect x="-8" y="-8" width="266" height="457" fill="white"/>
    </mask>
  </defs>
  <g>
    <path mask="url(#__id121)"
      d="M3,440.1129 C191,-140.0679 270,-141.36806 240,436.2124"
      stroke-linecap="butt" stroke-width="8" fill="none"
    />
  </g>
</svg>

<svg class="line" style="top: 50px; left: 650px;">
  <defs>
    <mask id="__id123" maskUnits="userSpaceOnUse" x="-8" y="-8" width="266" height="457">
      <rect x="-8" y="-8" width="266" height="457" fill="white"/>
    </mask>
  </defs>
  <g>
    <path mask="url(#__id123)"
      d="M3,440.1129 C191,-140.0678 270,-141.36806 240,436.2124"
      stroke-linecap="butt" stroke-width="8" fill="none"
    />
  </g>
</svg>

```
Comparison:

- The first SVG uses the path coordinate -140.0679 and is cut off.
- The second SVG uses the path coordinate -140.0678 and renders correctly.

Could you please investigate this rendering issue?

Thank you for your assistance.

[Fujii Hironori]

Created attachment 472064 [details]
test case

[Fujii Hironori]

I confirmed that it's reproducible with Windows port.

[Fujii Hironori]

I did bisecting with my Windows port binaries. This seems to be a regression.

251482@main good
260197@main good
265290@main good
267130@main good
269118@main good
269348@main good

269647@main bad
269911@main bad
270065@main bad

https://github.com/WebKit/WebKit/compare/d2b242779d24...63bf597ad4a3

[Radar WebKit Bug Importer]

<rdar://problem/133251058>

[Sam]

Thanks @Fujii Hironori a lot for looking at this issue.
Any help that I can provide on this so far?

[Sam]

Hi team, could I ask about the status of this bug please? Any chances that we can prioritise this please.

[Fujii Hironori]

269500@main is the regression point.

[Yusuke Suzuki]

Pull request: https://github.com/WebKit/WebKit/pull/32543

[EWS]

Committed 282651@main (bdbc42414835): <https://commits.webkit.org/282651@main>

Reviewed commits have been landed. Closing PR #32543 and removing active labels.

[Sam]

Hi WebKit Team,
I am still experiencing an issue with Safari 18.0 where a curved line rendered using the C command in an SVG path is cut off when a mask is applied. 
Could you help me double check the ticket is resolved yet please?
Thanks.

[Fujii Hironori]

Safari 18 is still using old WebKit. Try Safari Technology Preview.

[Simon Fraser (smfr)]

There is still an issue here, tracked by bug 279105.