Bug 232280 - Missing 'from' selector on @keyframes works erratically
Summary: Missing 'from' selector on @keyframes works erratically
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-10-25 15:40 PDT by jzabinski
Modified: 2022-02-01 07:01 PST (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description jzabinski 2021-10-25 15:40:44 PDT
When @keyframes rules are used to animate elements and the 'from' selector is missing, the animation behaves erratically.
See this example:

https://stackblitz.com/edit/web-platform-vmalvc?file=styles.css

styles.css contains this @keyframes rule:

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Running the project in Safari Technology Preview, I find that the line is animated erratically: anywhere from 20-60% of the time. If I add the 'from' keyword:

@keyframes dash {
  from {
    stroke-dashoffset: 14.7;
  }
  to {
    stroke-dashoffset: 0;
  }
}

The animation seems to happen consistently.

W3C says that 'If a 0% or from keyframe is not specified, then the user agent constructs a 0% keyframe using the computed values of the properties being animated.' That computation does not seem to be happening consistently. (Other browsers like Chrome work fine.)

(Reference: https://www.w3.org/TR/css-animations-1/)
Comment 1 Radar WebKit Bug Importer 2021-11-01 15:41:18 PDT
<rdar://problem/84903751>
Comment 2 Antoine Quint 2022-02-01 02:41:36 PST
Can you still reproduce the issue with Safari Technology Preview 139? I'm not able to reproduce it myself.
Comment 3 jzabinski 2022-02-01 04:18:03 PST
Verified: no longer reproduces.
Comment 4 Antoine Quint 2022-02-01 07:01:07 PST
Great! Thanks for checking.