Discrete animation of content property does not work

• Component: Animations
• Status: RESOLVED FIXED

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

[Radar WebKit Bug Importer]

<rdar://problem/38360395>

[Brandon McConnell]

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

[Antoine Quint]

(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.

[Antoine Quint]

Created attachment 443547 [details]
Patch for EWS

[Brandon McConnell]

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

[Antoine Quint]

Created attachment 443553 [details]
Patch

[EWS Watchlist]

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

[Antoine Quint]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/31545

[Antoine Quint]

Committed r285423 (243979@main): <https://commits.webkit.org/243979@main>

[Brandon McConnell]

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!

[Antoine Quint]

(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.

[Brandon McConnell]

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

[Jon Lee]

(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.

[Brandon McConnell]

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!

[Antoine Quint]

(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.