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> ```
<rdar://problem/105190667>
Created attachment 464911 [details] Test I can't reproduce in a recent build with this attachment.
Reproduces on macOS 12.6.1 (21G83) and STP 163 on a MacBook Pro (14-inch, 2021).
Reproduces on Ventura with a ToT build on the same MacBook Pro (14-inch, 2021).