[css-transitions-2] Should we make @starting-style resource-loading aware?

[bramus]

With CSS @starting-style you can determine the starting styles. I noticed that for images these are respected, but it only has the wanted visual outcome when the image is readily available - i.e. when loaded from cache.

For images that still need to be loaded first, the visual outcome is different: while the @starting-style is respected, authors would want these to only run once the image has been loaded.

Demo: https://codepen.io/bramus/pen/yLwZOqQ

starting-style-on-images.mp4

A more practical use-case would be a view transition that grows an image on the old page to a full-size image. The author can show a placeholder where the new image would be and have that fade-in once it’s been loaded. This would work there because the new snapshot is a live snapshot.

So, question is: should we make @starting-style on certain elements loading aware? Images? Videos? Iframes?

(Seeing overlap with #7467 here …)

[lilles]

I think state pseudo classes would be better. You could combine that with @starting-style to have a transition if the image is already loaded on first rendering.

Both spec and implementation based on special-casing @starting-style would be messy, I think.

[khushalsagar]

I think state pseudo classes would be better.

Is there already a state pseudo-class which activates if the resource associated with the element is fully loaded?

I'm also not sure how to reason about the load state for images because you have animated images (GIFs) and progressively loaded images where the content is still streaming in but you do want to start fading in sooner than full load.

[lilles]

I think state pseudo classes would be better.

Is there already a state pseudo-class which activates if the resource associated with the element is fully loaded?

No, I was referring to issue #7467 that @bramus mentioned.

I'm also not sure how to reason about the load state for images because you have animated images (GIFs) and progressively loaded images where the content is still streaming in but you do want to start fading in sooner than full load.

I don't know, but the that's a relevant discussion both for a pseudo class and for baking that behavior into @starting-style. I just don't think baking it into @starting-style is the right approach. One thing is that it now cleanly relates to before/after-change style and whether the previous style change event. Another thing is that you might want to do a @starting-style animation of e.g. the position of an image while it loads, independently from the fading-in effect.

[khushalsagar]

Agreed that the loaded state should be reflected in a pseudo-class. So you could make the image visible only after it has loaded and probably use a CSS transition to do a fade-in or any other effect.

[bramus]

Seems like we’re all convinced the pseudo classes are a better solution here …

Closing.