Bug 248004 - SVG and Canvas clipping path artifact
Summary: SVG and Canvas clipping path artifact
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
Depends on:
Blocks:
 
Reported: 2022-11-16 17:36 PST by Jonathan Olson
Modified: 2023-01-11 12:48 PST (History)
5 users (show)

See Also:

Attachments
An image (black pixel) shows up incorrectly along the top (6.72 KB, image/png)
2022-11-16 17:36 PST, Jonathan Olson 		no flags Details
Test case (1.00 KB, text/html)
2023-01-11 11:38 PST, Said Abou-Hallawa 		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:36:58 PST 
Created attachment 463563 [details]
An image (black pixel) shows up incorrectly along the top

Overview: Clipping path seems to have an artifact (and incorrectly shows part of an image) along the top of its bounding box. This is reproducible in SVG, but ALSO seems to happen in Canvas (if it would help to record exact Canvas commands to reproduce, let me know.

Steps to reproduce:

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

  <title>Bug example</title>
</head>

<body style="background-color: white;">
  <svg width="1012" height="816">
    <defs>
      <clipPath id="clip" clipPathUnits="userSpaceOnUse">
        <path
            d="M -13.41536647912858271070 -48.37424875107316069034 A 51.77079632679519249905 51.77079632679519249905 0 1 0 14.25492059817330492422 51.40158310364876825815 A 54.91238898038498206233 54.91238898038498206233 0 1 0 -15.09447471721803069045 -54.42891745622437582597 Z"></path>
      </clipPath>
    </defs>
    <g transform="matrix(0.98828125000000000000,0,0,0.98828125000000000000,100,100)" clip-path="url(#clip)">
      <image x="-500px" y="-500px" width="1155px" height="1164px"
             xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAABNJREFUCB1jZGBg+A/EDEwgAgQADigBA//q6GsAAAAASUVORK5CYII%3D"></image>
    </g>
  </svg>
</body>
</html>

Actual results: <attached> (incorrect black line along the top)

Expected results: Similar, but without the line along the top.

Build Date & Hardware:

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

Additional information:

Noticed in https://github.com/phetsims/qa/issues/854, seems independent from the other artifact issues.
Comment 1 Alexey Proskuryakov 2022-11-16 19:42:20 PST 
This reproduces as described for me.
Comment 2 Radar WebKit Bug Importer 2022-11-23 17:37:15 PST 
<rdar://problem/102635931>
Comment 3 Said Abou-Hallawa 2023-01-11 11:38:10 PST 
Created attachment 464456 [details]
Test case
Comment 4 Said Abou-Hallawa 2023-01-11 12:48:26 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.