[Webkit-unassigned] [Bug 211986] New: Web Animations API does not ease as as expected

[bugzilla-daemon at webkit.org]

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

            Bug ID: 211986
           Summary: Web Animations API does not ease as as expected
           Product: WebKit
           Version: Safari 13
          Hardware: All
                OS: All
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: steveblue at gmail.com
                CC: dino at apple.com

When using this animation on https://stephenbelovarich.com, the transition appears correct for all browsers except Safari (MacOS and iOS). When animating the element with Web Animations API, the transition starts, then at the end appears stuck, snapping into place. It appears easing is not being applied correctly. Reproducible with any easing and fill.

```
{
  keyframes: [
    {
      transform: 'translateX(0%) translateY(0%)',
      width: '44px',
      top: '0%',
      right: '0%'
    },
    {
      transform: 'translateX(50%) translateY(-50%)',
      width: '320px',
      top: '50%',
      right: '50%'
    }
  ],
  options: {
    fill: 'forwards',
    easing: 'ease-in-out',
    duration: 700
  }
}
```
The element has this CSS:
```
    nav {
                position: absolute;
                display: block;
                top: 0%;
                right: 0%;
                width: 44px;
                height: 44px;
                transform: translateX(0%) translateY(0%);
                text-align: center;
```

Steps to reproduce:

Visit https://stephenbelovarich.com
Click on hamburger menu
Observe transition is incorrect in Safari, correct in Chrome and Firefox.

I'm not sure if this is a duplicate of 210526. The issue seemed like it could be different.

-- 
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/20200516/8019408c/attachment.htm>