Bug 253032
| Summary: | animation-name or @keyframe identifiers with quotes are recognized | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Ahmad Saleem <ahmad.saleem792> |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED WORKSFORME | ||
| Severity: | Normal | CC: | dino, graouts, graouts, koivisto |
| Priority: | P2 | ||
| Version: | Safari Technology Preview | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Ahmad Saleem
Hi Team,
I came cross following codepen from Chrome's Monorail and Safari Technology Preview 164 is matching Firefox Nightly 112 as of right now but Chrome Canary 113 is totally different:
CodePen Link - https://codepen.io/rupl/pen/BaEjPq?editors=110
*** Safari 16.3 ***
Only last two are pulsating.
*** Safari Technology Preview 164 ***
All are pulsating
*** Chrome Canary 113 ***
Only Green one is pulsating
*** Firefox Nightly 112 ***
All are pulsating
____
Chrome Bug - https://bugs.chromium.org/p/chromium/issues/detail?id=423424
Just wanted to raise to see if we have interop behavior or we are wrong, if latter, so we can track this and fix.
Thanks!
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Antoine Quint
I think the CodePen is wrong and all the referenced material from it outdated.
The current spec for CSS Animations specifies <string> as valid values at https://w3c.github.io/csswg-drafts/css-animations/#typedef-keyframes-name:
<keyframes-name> = <custom-ident> | <string>
There is also this note specifically showing using strings as valid:
For example, the following two @keyframes rules have the same name, so the first will be ignored:
@keyframes foo { /* ... */ }
@keyframes "foo" { /* ... */ }
I believe Chrome is incorrect while Firefox and Safari are correct.