Bug 251941

Summary:

When animating the opacity of an element with clip-path, clip-path shifts during animation

Product:

WebKit

Reporter:

Robert <foyer.docks0l>

Component:

Animations

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

dino, graouts, graouts, simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Mac (Intel)

OS:

macOS 12

Attachments:

Description	Flags
Screen recording. During the animation of opacity, the circle moves approximately one pixel.	none
Test	none

Description Robert 2023-02-08 12:29:10 PST

Created attachment 464909 [details]
Screen recording. During the animation of opacity, the circle moves approximately one pixel.

System info:
MacBook Pro (Retina, 15-inch, Mid 2015)
macOS 12.6.3 (21G419)
Safari Technology Preview Release 162 (Safari 16.4, WebKit 17615.1.18.2)

Description: when animating the opacity of an element with `clip-path` set to an SVG clipPath, during the animation, the clip-path will be shifted by a small amount (roughly one pixel). Before and after the animation it is located in its correct position.

Might be related to https://bugs.webkit.org/show_bug.cgi?id=241362

Below is a file that triggers the bug. A screen recording of the issue is attached.

```html
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<style>
			.icon-circle {
				clip-path: url(#circle); /* must be a url(#href); isn't triggered by e.g., circle(5px at 10px 10px) */
				width: 20px;
				height: 20px;
				display: inline-block;
				background-color: black;
				color: cyan;
				transition: all 1s ease;
			}
			.main:hover .icon-circle {
				opacity: 0.5;
			}
		</style>
	</head>
	<body class="article">
		<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
			<defs>
				<clipPath id="circle" clipPathUnits="objectBoundingBox">
					<circle cx=".5" cy=".5" r=".3"></circle>
				</clipPath>
			</defs>
		</svg>
		<div class="main">WebKit<span class="icon-circle">A</span></div>
	</body>
</html>
```

Comment 1 Radar WebKit Bug Importer 2023-02-08 13:47:22 PST

<rdar://problem/105190667>

Comment 2 Simon Fraser (smfr) 2023-02-08 13:49:11 PST

Created attachment 464911 [details]
Test

I can't reproduce in a recent build with this attachment.

Comment 3 Antoine Quint 2023-02-09 00:35:16 PST

Reproduces on macOS 12.6.1 (21G83) and STP 163 on a MacBook Pro (14-inch, 2021).

Comment 4 Antoine Quint 2023-02-09 00:48:47 PST

Reproduces on Ventura with a ToT build on the same MacBook Pro (14-inch, 2021).