Intent to prototype: cross-fade

[Zeke Medley]

Summary:

cross-fade is a CSS function part of the CSS Image Module Level 4.
cross-fade allows for the blending of multiple CSS images with varying
opacities. For example:

cross-fade(url(“foo.jpg”) 50%,

radial-gradient(circle, transparent 50%, black 150%) 50%);

might be used to add a vignette effect to an image.

Bug link: https://bugzilla.mozilla.org/show_bug.cgi?id=546052

Standard: https://drafts.csswg.org/css-images-4/#cross-fade-function

Platform coverage: all

DevTools bug: none

Preference: layout.css.cross-fade.enabled

Other browsers:

There is an older, implemented syntax. In Safari it is unprefixed and in
Blink based browsers it is behind the -webkit prefix. This older version
only supports two images at a time and has incompatible syntax with the
version in the spec. See this
<https://developer.mozilla.org/en-US/docs/Web/CSS/cross-fade> MDN article
for more information about how the older implementation differs from the
specified one. According to Can I Use
<https://caniuse.com/#feat=css-cross-fade> and our own queries on
httparchive <https://httparchive.org/> this older syntax has very little
usage.

As it receives little usage and does not align with the current cross-fade
spec we will implement the newer cross-fade syntax according to the CSSWG
specification. As the older syntax will not parse this is unlikely to
produce unexpected results for the very limited number of webpages
currently using the older cross-fade. For all intents and purposes, if a
website still uses the older syntax the status quo will remain in effect as
Firefox will continue to not implement their cross-fade.

Webkit bug 179942 <https://bugs.webkit.org/show_bug.cgi?id=179942> seems to
track this syntax mismatch.

web-platform-tests: Will be implemented as part of bug 546052
<https://bugzilla.mozilla.org/show_bug.cgi?id=cross-fade>.

Secure Contexts: Enabled in secure contexts, like other similar CSS features
Is this feature enabled by default in sandboxed iframes? yes

[Jeff Muizelaar]

Have other browsers expressed an interest in implementing the new syntax?

> _______________________________________________
> dev-platform mailing list
> dev-pl...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-platform

[aaa...@gmail.com]

Common implementations of crossfade just interpolate the opacity of both images, leading to the background "leaking through" for a portion of the fade. On a white background, this is a "flash".

If this features gets traction, it is an opportunity to make the "right" way the "easy" way. A crossfade between two opaque images, should always be opaque.

Good luck! Cheering from the sidelines!

Let me know if I can clarify further.

[Jeff Muizelaar]

Do Chrome and Safari do it the right way?

[aaa...@gmail.com]

On Tuesday, 14 July 2020 16:53:48 UTC-7, Jeff Muizelaar wrote:
> Do Chrome and Safari do it the right way?

Ahem...

Yes. On both counts.



I'll show myself out.