[Webkit-unassigned] [Bug 251941] New: When animating the opacity of an element with clip-path, clip-path shifts during animation

Wed Feb 8 12:29:10 PST 2023

https://bugs.webkit.org/show_bug.cgi?id=251941

            Bug ID: 251941
           Summary: When animating the opacity of an element with
                    clip-path, clip-path shifts during animation
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Mac (Intel)
                OS: macOS 12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: foyer.docks0l at icloud.com
                CC: dino at apple.com, graouts at apple.com

Created attachment 464909

  --> https://bugs.webkit.org/attachment.cgi?id=464909&action=review

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230208/5e24589c/attachment-0001.htm>