Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-images] cross-fade() syntax doesn't match implemented webkit-cross-fade() #2234

csnardi opened this issue Jan 28, 2018 · 3 comments


None yet
4 participants
Copy link

commented Jan 28, 2018

According to the spec:

The syntax for cross-fade() is defined as:

cross-fade() = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>

However, the implementation of webkit-cross-fade() in Chrome/Safari has the percentage at the end, and a comma in between the percent and the image. Safari has also un-prefixed cross-fade(). I'm not sure what the relevant use of webkit-cross-fade()/cross-fade() is, but perhaps it would make sense to match the syntax to Safari/Chrome's current implementation as they are currently the only two implementations of cross-fade().

The current implementation in Safari would look like:

cross-fade(url(foo.png), url(bar.png), 20%)

And per the spec:

cross-fade(20% url(foo.png), url(bar.png))

This comment has been minimized.

Copy link

commented Jan 28, 2018

A use case is animation interpolating between images.

Chrome: -webkit-cross-fade(url(".../foo.png"), url(".../bar.png"), 0.2)
Edge: none
Firefox: url(".../foo.png")
Safari: cross-fade(url(.../foo.png), url(.../bar.png), 0.2)


This comment has been minimized.

Copy link
Contributor Author

commented Feb 17, 2018

It looks like this was changed in b2cc789 by @tabatkins, although I can't find if there was a reason for changing the grammar order.


This comment has been minimized.

Copy link

commented Jul 4, 2018

Yes, the reason was to allow extension to >2 arguments, which we just resolved to do.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.