Copied from https://bugs.webkit.org/show_bug.cgi?id=157632#c3 : --- Webkit implementation of the grammar and the latest spec are not the same. cross-fade() = cross-fade( <cf-mixing-image> , <cf-final-image>? ) <cf-mixing-image> = <percentage>? && <image> <cf-final-image> = <image> | <color> So we have to put the percentage in front of it, and remove the comma. Before: -webkit-cross-fade(url(foo.png), url(bar.png), 20%) After: cross-fade(20% url(foo.png), url(bar.png)) --- If WontFixing this, then please consider raising an issue with the spec to change to the currently implemented grammar.
<rdar://problem/35705284>
I raised a spec issue for this at https://github.com/w3c/csswg-drafts/issues/2234.
https://jsfiddle.net/ericwilligers/jLjn13c6/ _______ Safari 16.4: cross-fade(url("https://example.com/foo.png"), url("https://example.com/bar.png"), 0.2) Chrome Canary 114: -webkit-cross-fade(url("https://example.com/foo.png"), url("https://example.com/bar.png"), 0.2) Firefox Nightly 113: url("https://example.com/foo.png")