Bug 248003 - SVG path artifact showing up along bounding box
Summary: SVG path artifact showing up along bounding box
Status: RESOLVED MOVED
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 16
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
: 245652 252133 (view as bug list)
Depends on:
Blocks:
 
Reported: 2022-11-16 17:29 PST by Jonathan Olson
Modified: 2023-02-20 11:02 PST (History)
7 users (show)

See Also:

Attachments
A horizontal black line appears incorrectly above the arrow (12.93 KB, image/png)
2022-11-16 17:29 PST, Jonathan Olson 		no flags Details
Test case (958 bytes, text/html)
2022-11-17 09:59 PST, Simon Fraser (smfr) 		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 Jonathan Olson 2022-11-16 17:29:29 PST 
Created attachment 463562 [details]
A horizontal black line appears incorrectly above the arrow

Overview: As of Safari 16, visual artifacts (1-pixel wide lines) are showing up as if they are part of a stroked path. This is reproducible, persistent, and appears to happen along the top edge of the bounding box of the path.

Steps to reproduce:

View the following HTML:
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Arrow bug test</title>
</head>
<body>
  <svg focusable="false" width="1502" height="566">
    <g transform="matrix(0.84317049365593055299,0.00000000000000000000,0.00000000000000000000,0.84317049365593055299,319.29670724816355686926,0.00000000000000000000)">
      <g transform="scale(0.80000000000000004441)">
        <path d="M 429.73685877293036128322 152.33263688218951870113 L 475.96967537052415764265 314.78633972164936949412 L 471.16063094948151501740 316.15494914600617448741 L 482.48002585411597920029 328.52916827259900856006 L 485.58776421260949973657 312.04912087293575950753 L 480.77871979156685711132 313.41773029729256450082 L 434.54590319397306075189 150.96402745783271370783 L 429.73685877293036128322 152.33263688218951870113 Z" style="fill: rgb(50,130,215); stroke: rgb(64,64,64);"></path>
      </g>
    </g>
  </svg>
</body>
</html>

Actual results: <attached> (there is a black line above the arrow)

Expected results: There should be no black line along the top. It should just show the arrow

Build Date & Hardware:

macOS 13.0.1
Safari Version 16.1 (18614.2.9.1.12)
Release 157 (Safari 16.4, WebKit 18615.1.11.7)

Additional information:

Discovered in https://github.com/phetsims/geometric-optics-basics/issues/31.

Adding "M0 0" at the end of the SVG path definition seems to prevent the bug from happening.
Comment 1 Alexey Proskuryakov 2022-11-16 22:05:23 PST 
I can reproduce as described.
Comment 2 Simon Fraser (smfr) 2022-11-17 09:59:53 PST 
Created attachment 463588 [details]
Test case
Comment 3 Simon Fraser (smfr) 2022-11-17 10:00:39 PST 
Can you reproduce in Safari Tech Preview 157?
Comment 4 Jonathan Olson 2022-11-17 11:33:40 PST 
I was able to reproduce this in Safari Tech Preview 157.
Comment 5 Radar WebKit Bug Importer 2022-11-23 17:30:16 PST 
<rdar://problem/102635866>
Comment 6 Said Abou-Hallawa 2023-01-11 11:33:33 PST 
I can reproduce this bug on MacBook Pro AS only. I can't reproduce it on Intel machines. Bug is in a component below WebKit.
Comment 7 Simon Fraser (smfr) 2023-02-20 11:01:33 PST 
*** Bug 245652 has been marked as a duplicate of this bug. ***
Comment 8 Simon Fraser (smfr) 2023-02-20 11:02:24 PST 
*** Bug 252133 has been marked as a duplicate of this bug. ***