[Webkit-unassigned] [Bug 243864] New: Keyframes don't interpolate for omitted properties in intermediate keyframes

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Thu Aug 11 18:47:45 PDT 2022


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

            Bug ID: 243864
           Summary: Keyframes don't interpolate for omitted properties in
                    intermediate keyframes
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Mac (Intel)
                OS: macOS 12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: chriskirknielsen+wkbugs at gmail.com

**Overview:**
When defining CSS animation keyframes with a start and end (0% and 100%) on a defined property (e.g. transform), intermediate keyframes where the start/end property is not defined causes the animation to fail interpolating the value at that intermediate keyframe.

**Steps to Reproduce:**
Reproduce this with an animation on any element with the start/end property being omitted at 50%, affecting another property instead.
Live example on CodePen: https://codepen.io/chriskirknielsen/pen/xxWapbW?editors=1100
Code to reproduce:
```html
<p class="test-element">Text that should be moving</p>
```

```css
.test-element {
        animation: testAnim 1s ease-in-out infinite;
}

@keyframes testAnim {
        0% {
                transform: rotate(-90deg) translateX(1.25em) rotate(90deg);
        }
        50% {
                opacity: 0; /* Commenting this prevents the issue */
        }
        100% {
                transform: rotate(-450deg) translateX(1.25em) rotate(450deg);
        }
}
```

**Actual Results:**
The animation doesn't smoothly animate the `transform` property from 0% to 100%.

**Expected Results:**
The animation runs smoothly and the omitted property is interpolated across keyframes.

**Build Date & Hardware:**
Using Safari Technology preview, Release 151 (Safari 16.0, WebKit 17615.1.1.2)
Running macOS Monterey 12.4 on MacBook Pro (16-inch, 2019)

**Additional Builds and Platforms:**
Doesn't occur on Safari Version 15.5 (17613.2.7.1.8) on macOS
Doesn't occur on Chrome Version 104 on macOS
Doesn't occur on Firefox Version 103 on macOS

(this is my first bug report, I apologise for the formatting)

-- 
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/20220812/24c2a8de/attachment.htm>


More information about the webkit-unassigned mailing list