Bug 183544 - Discrete animation of content property does not work
Summary: Discrete animation of content property does not work
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 11
Hardware: Mac macOS 10.13
: P2 Normal
Assignee: Antoine Quint
URL: https://codepen.io/juwain/pen/JLozbJ
Keywords: InRadar, WebExposed
Depends on:
Blocks:
 
Reported: 2018-03-10 12:30 PST by zyuzin.vitaly
Modified: 2021-12-09 02:36 PST (History)
15 users (show)

See Also:


Attachments
Patch for EWS (5.04 KB, patch)
2021-11-08 08:03 PST, Antoine Quint
no flags Details | Formatted Diff | Diff
Patch (8.41 KB, patch)
2021-11-08 08:48 PST, Antoine Quint
koivisto: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description zyuzin.vitaly 2018-03-10 12:30:06 PST
I try to animate `content` property of ::before pseudoelement.

I set the content property in rule and change its value in keyframes.

It works correct in Firefox and Chrome, but doesn't work in Safari.

Spec says https://drafts.csswg.org/css-transitions/#animatable-properties

"…since the from and to values cannot be interpolated, the animation is done in a single step."

You can watch the bug here: https://codepen.io/juwain/pen/JLozbJ
Comment 1 Radar WebKit Bug Importer 2018-03-11 17:52:32 PDT
<rdar://problem/38360395>
Comment 2 Brandon McConnell 2021-09-02 06:51:34 PDT
Is there any update on this? Discrete animation has already been added for several CSS properties within WebKit/Safari, while most properties are discretely animatable across all other browsers and engines. Can we not simply allow all properties to be discretely animatable?

Specifically regarding this CSS property, `content`, this ticket has been pending in a "NEW" status since 2018. A prime example of this in action can be seen here, in a CodePen which I created over 2 years which appears to work across all other non-WebKit browsers:

CodePen example: https://cdpn.io/e/bZqGdw
Comment 3 Antoine Quint 2021-11-08 08:01:13 PST
(In reply to Brandon McConnell from comment #2)
> Is there any update on this?

I am now actively working on this.

> Discrete animation has already been added for
> several CSS properties within WebKit/Safari, while most properties are
> discretely animatable across all other browsers and engines. Can we not
> simply allow all properties to be discretely animatable?

While for a lot of CSS properties it's very simple to add support for discrete animation, the "content" property requires a bit more work. The way most CSS properties are implemented, it's not just a simple switch we can toggle to add support for discrete animations.

> Specifically regarding this CSS property, `content`, this ticket has been
> pending in a "NEW" status since 2018. A prime example of this in action can
> be seen here, in a CodePen which I created over 2 years which appears to
> work across all other non-WebKit browsers:
> 
> CodePen example: https://cdpn.io/e/bZqGdw

Thanks for the example, I have it working with my work-in-progress fix, as well as the pen shared by the original reporter.

However, it seems there is no WPT coverage for this, so I need to add coverage before landing a fix.
Comment 4 Antoine Quint 2021-11-08 08:03:21 PST
Created attachment 443547 [details]
Patch for EWS
Comment 5 Brandon McConnell 2021-11-08 08:36:43 PST
Thanks, Antoine!

This is fantastic news. Please let me know if there is anything I can do to share the load— whether testing or otherwise.

I've been anticipating this change for quite some time, and the thought that it may finally be arriving is exhilarating.

Thanks again!
Brandon McConnell
Comment 6 Antoine Quint 2021-11-08 08:48:16 PST
Created attachment 443553 [details]
Patch
Comment 7 EWS Watchlist 2021-11-08 08:49:36 PST
This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess
Comment 8 Antoine Quint 2021-11-08 08:58:27 PST
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/31545
Comment 9 Antoine Quint 2021-11-08 12:15:01 PST
Committed r285423 (243979@main): <https://commits.webkit.org/243979@main>
Comment 10 Brandon McConnell 2021-11-08 15:04:23 PST
Antoine, that's awesome! Will this first be released in Safari TP, or will this be hot-fixed? Wondering when IO can begin testing with it? Thanks again!
Comment 11 Antoine Quint 2021-11-08 23:45:52 PST
(In reply to Brandon McConnell from comment #10)
> Antoine, that's awesome! Will this first be released in Safari TP, or will
> this be hot-fixed? Wondering when IO can begin testing with it? Thanks again!

This will be first available in Safari Technology Preview. I can't comment as to when this will make it into a Safari release proper.
Comment 12 Brandon McConnell 2021-12-05 16:37:00 PST
Hi Antoine,

It appears a new version of STP was released and I still do not see this working. Should the new version have supported this fix?

Thanks,
Brandon McConnell
Comment 13 Jon Lee 2021-12-05 19:24:52 PST
(In reply to Brandon McConnell from comment #12)
> Hi Antoine,
> 
> It appears a new version of STP was released and I still do not see this
> working. Should the new version have supported this fix?
> 
> Thanks,
> Brandon McConnell

STP 135 does not include this patch (https://webkit.org/blog/12040/release-notes-for-safari-technology-preview-135/). I suspect the next one will.
Comment 14 Brandon McConnell 2021-12-08 21:21:33 PST
It's live and looks beautiful!! THANK YOU for all the diligence and hard work on this.

One question— I'm noticing that my emojis are not rendering as they normally would. Compare Safari TP to other browsers, Chrome and Firefox:

Example URL: https://codepen.io/brandonmcconnell/pen/bZqGdw


Thanks again!
Comment 15 Antoine Quint 2021-12-09 02:36:27 PST
(In reply to Brandon McConnell from comment #14)
> It's live and looks beautiful!! THANK YOU for all the diligence and hard
> work on this.

You're welcome.

> One question— I'm noticing that my emojis are not rendering as they normally
> would. Compare Safari TP to other browsers, Chrome and Firefox:
> 
> Example URL: https://codepen.io/brandonmcconnell/pen/bZqGdw

Please reduce this particular issue if you can and file a separate bug report. This will help diagnose any potential issue. Thank you.