Bug 248004

Summary:

SVG and Canvas clipping path artifact

Product:

WebKit

Reporter:

Jonathan Olson <jonathan.olson>

Component:

SVG

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED MOVED

Severity:

Normal

CC:

sabouhallawa, simon.fraser, webkit-bug-importer, zalan, zimmermann

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

Attachments:

Description	Flags
An image (black pixel) shows up incorrectly along the top	none
Test case	none

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.