Open Bug 1513670 Opened 5 years ago Updated 2 years ago

Provide a means of doing dynamic color fades in image sprite sheets without breaking rastered SVG image caching

Categories

(Core :: Layout: Images, Video, and HTML Frames, enhancement, P3)

enhancement

Tracking

()

Tracking Status
firefox66 --- affected

People

(Reporter: mstange, Unassigned)

References

(Depends on 1 open bug)

Details

Attachments

(2 files)

Attached image demo SVG
This is a problem that came up in bug 1506996: The Firefox UI uses SVG images to implement sprite sheet animations, and in some of these animations, it uses color transitions where the starting color is somewhat dynamic.
At the moment, these color transitions are implemented by animating the context-fill property on the element that uses the SVG image. However, changing context-fill means that the cached rasterization of the SVG image gets discarded.

If we could express an interpolated color between a fixed context-fill color and some fixed destination color, in a way that does not break SVG rasterization caching, that would solve this problem.

The CSS calc function does not allow interpolating between colors. And there is no mix() function.

One way to interpolate between dynamic colors is to use animation-delay on a paused CSS animation, like this:

.filledElement {
  animation: fade-to-gray 1s linear forwards paused;
}

@keyframes fade-to-gray {
  from { fill: context-fill; }
  to   { fill: gray; }
}

<rect class="filledElement" style="animation-delay: -0.3s"/>

This gets us most of the way there. I think all that's needed to make such SVG images have their rasterizations cached is to make it ignore paused CSS animations.
(In reply to Markus Stange [:mstange] from comment #0)
> This gets us most of the way there. I think all that's needed to make such
> SVG images have their rasterizations cached is to make it ignore paused CSS
> animations.

Thinking about this more, I think we don't even need to change how SVG image rasterizations are cached. The Firefox UI uses these images in a CSS transform, which is prerendered, so the pixels are *already* cached at the PaintedLayer level. So I think the technique I suggested here is ready to be used in the Firefox UI today.
Depends on: 1514311
(In reply to Markus Stange [:mstange] from comment #0)
> @keyframes fade-to-gray {
>   from { fill: context-fill; }
>   to   { fill: gray; }
> }

It turns out this doesn't work at the moment after all, due to bug 1514311.
Priority: -- → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: