NEW251941
When animating the opacity of an element with clip-path, clip-path shifts during animation
https://bugs.webkit.org/show_bug.cgi?id=251941
Summary When animating the opacity of an element with clip-path, clip-path shifts dur...
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
Test (727 bytes, text/html)
2023-02-08 13:49 PST, Simon Fraser (smfr)
no flags
Radar WebKit Bug Importer
Comment 1 2023-02-08 13:47:22 PST
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.