[Webkit-unassigned] [Bug 266848] New: CSS linear() function not easing as expected

[bugzilla-daemon at webkit.org]

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

            Bug ID: 266848
           Summary: CSS linear() function not easing as expected
           Product: WebKit
           Version: Safari 17
          Hardware: Mac (Apple Silicon)
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: hey at ryanmulligan.dev
                CC: dino at apple.com, graouts at apple.com

Support for the CSS linear() function was introduced in Safari 17.2. However, it doesn't seem to be applying properly. Here are some CodePen examples for review:

- https://codepen.io/hexagoncircle/pen/wvOvRaR
- https://codepen.io/jh3y/pen/WNLQboq

When reviewed in latest versions of Chrome and Firefox, the linear easing works as expected. In Safari, the elastic and bounce effects are removed, leaving the animations a bit lifeless.

It may be worth noting that both examples use a @supports at-rule to check if linear() is supported, supplying fallbacks for where it is not. I was confused as to why Safari wasn't using the fallback values until realizing that the function is now supported, just not working as expected.

Related links:

- Safari 17.2 release notes: https://www.webkit.org/blog/14787/webkit-features-in-safari-17-2/
- [css-easing-2] Implement linear(...) easing function for css animations [RESOLVED FIXED]: https://bugs.webkit.org/show_bug.cgi?id=240061
- Linear easing function on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#linear_easing_function

-- 
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/20231223/29302f09/attachment.htm>