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, 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

Robert

Reported 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> ```

Attachments
Screen recording. During the animation of opacity, the circle moves approximately one pixel. (118.57 KB, video/quicktime) 2023-02-08 12:29 PST, Robert	no flags	Details
Test (727 bytes, text/html) 2023-02-08 13:49 PST, Simon Fraser (smfr)	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2023-02-08 13:47:22 PST

<rdar://problem/105190667>

Simon Fraser (smfr)

Comment 2 2023-02-08 13:49:11 PST

Created attachment 464911 [details] Test I can't reproduce in a recent build with this attachment.

Antoine Quint

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

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

Antoine Quint

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

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

Note You need to log in before you can comment on or make changes to this bug.