Repository navigation
[CSS-images] Specify fallback behavior when replaced or background image content not available #1984
Description
There appears to be no spec language for what paints to the screen when the replaced content
of an <img> or CSS backgroud image is not available at paint time, either due to being in process
of being loaded, or due to an async decode.
Image fallbacks appear to be (partially?) specified in the presence of the image() function as part of
css images level 4. https://www.w3.org/TR/css-images-4/#image-fallbacks. This needs to be
extended more generally.
I think the best behavior is to fall back to whatever content painted underneath the paint phase that
would have drawn the image. e.g. if step 1.2. or step 7.1 of the algorithm below had no image content,
still paint but just skip those steps.
https://www.w3.org/TR/CSS2/zindex.html
See also whatwg/html#1920
Activity
[-][CSS-images\ Specify fallback behavior when replaced or background image content not available[/-][+][CSS-images] Specify fallback behavior when replaced or background image content not available[/+]fantasai commentedon Dec 4, 2017
See “invalid image” in https://drafts.csswg.org/css-images-3/#image-values which is the spec prose that's currently active (no one implements
image()yet). I suppose we can extend the wording to include images that have not yet loaded.tabatkins commentedon Dec 4, 2017
Yeah, I think "invalid image" should cover the loading case as well.
AmeliaBR commentedon Dec 4, 2017
For content images, at least, browsers treat loading images (blank space or partial image render) differently from invalid images (broken-image icon).
Not sure whether its worthwhile to have a similar distinction for CSS images. It might be worth testing to see what browsers currently do.
tabatkins commentedon Dec 4, 2017
Yeah, letting the UA discriminate between those cases when doing its ultimate fallback seems fine, and will just need some extra prose. But it would be good, I think, to let
image()fallback handle loading images as well.(
image()will need to discriminate here, too - we don't want a loading fallback to fall back to another URL! Basically, if it's currently depending on a loading image, it should skip all further images that require loading, and fall back all the way to a CSS-generated image or color.)[css-images-3] Specify 'loading image' as a separate concept, for #1984.
fantasai commentedon Jul 19, 2019
OK, we've defined “loading image” as a term somewhat distinct from “invalid image”, see changes at: 846d21d
Agenda+ for CSSWG review.
[css-images-4] Copy definition of 'loading image' to Images 4. Make i…
1 remaining item
henke37 commentedon Aug 7, 2019
jonathanKingston/css-fetch-integration#1 seems relevant when it comes to defining how images are loaded.
css-meeting-bot commentedon Aug 7, 2019
The CSS Working Group just discussed
Specify fallback behavior when replaced or background image content not available.The full IRC log of that discussion
<dael> Topic: Specify fallback behavior when replaced or background image content not available<dael> github: https://github.com//issues/1984
<dael> astearns: TabAtkins added but he's IRC only
<dael> fantasai: Have some discussion from last week
<dael> fantasai: Wanted to get WG review I believe. Then we were supposed to make edits
<dael> astearns: Needs edits tag was removed
<dael> fantasai: I'll fix that
<dael> astearns: Maybe were edits...There is a PR
<astearns> https://github.com/w3c/csswg-drafts/commit/73d7635574d54f5afb154b5bcf24a2fc086e2093
<dael> AmeliaBR: There were edits 3 weeks ago discussed last week. nothign since last week
[css-images-3] Handle image replacement case of loading images. #1984
[css-images-4] Handle image replacement case of loading images. #1984
css-meeting-bot commentedon Aug 14, 2019
The CSS Working Group just discussed
Specify fallback behavior when replaced or background image content not available.The full IRC log of that discussion
<dael> Topic: Specify fallback behavior when replaced or background image content not available<dael> github: https://github.com//issues/1984
<jensimmons> there might be clarifications needed about wavy and double lines…. https://github.com//issues/4134 fantasai was tasked with working on the spec.
<TabAtkins> https://github.com/w3c/csswg-drafts/commit/3f884b87c54b38afd7742fb8e123a7d27ddd3ac4
<dael> TabAtkins: When we spoke last time waiting on Apple; myles wanted to review. fantasai committed text for replaced image. Want to ensure spec did not rule out leaving image in place while waiting for new image
<fantasai> jensimmons, for the record, I think what I was actioned to write was that the line thickness, amplitude, and frequency should scale together (not necessarily strictly proportionally, but roughly proportionally), and double simlar to border-width: double in the same way
<dael> TabAtkins: If Apple wants to review that's fine but want to do soonish
<dael> myles: Can I give myself an end of week deadline?
<dael> TabAtkins: Next call is fine.
<dael> Rossen_: Next week's call is fine. TabAtkins anything else on this?
<dael> TabAtkins: It's good
litherum commentedon Aug 17, 2019
The current text looks fine.
emilio commentedon Aug 20, 2019
FWIW we have some edge cases in this area that would be nice to clarify, including #218 / #2831, where there's no interop in sight, but they may not be in scope of this issue.
css-meeting-bot commentedon Aug 21, 2019
The CSS Working Group just discussed
Specify fallback behavior when replaced or background image content not available, and agreed to the following:RESOLVED: Loading images are not invalid but treated similarly as explained in https://drafts.csswg.org/css-images-3/#image-valuesThe full IRC log of that discussion
<dael> Topic: Specify fallback behavior when replaced or background image content not available<dael> github: https://github.com//issues/1984
<dael> fantasai: Just waiting on myles to review
<dael> myles: I did review and commented on issue
<dael> Rossen_: Said it looks fine
<dael> Rossen_: Let's try and resolve. Any additional comments or concerns? Anyone need summary before we resolve?
<dael> Rossen_: I'll take silence as a no.
<dael> TabAtkins: Prop: Accept edits to images spec about specifying behavior of not yet loaded images [missed]
<TabAtkins> I'm on mobile, not wifi, wtffffff
<dael> fantasai: Prop: Specify what's happening when you're loading image and add text explaining what you do while it's loading
<fantasai> https://drafts.csswg.org/css-images-3/#image-values
<dael> fantasai: Added a section for what it means for an image to be in process of loading and what you're supposed to do ^
<dael> fantasai: [reads]
<chris> That wording on loading images sounds great to me!
<AmeliaBR> 👍
<dael> Rossen_: For those hearing this for the first time, any questions or comments?
<dael> chris: sgtm. It covers and don't need anything else
<dael> Rossen_: Prop: Loading images are not invalid but treated similarly as explained in https://drafts.csswg.org/css-images-3/#image-values
<dael> Rossen_: Fair summary?
<dael> fantasai: Yes
<dael> Rossen_: Comments or objections?
<dael> RESOLVED: Loading images are not invalid but treated similarly as explained in https://drafts.csswg.org/css-images-3/#image-values
<fantasai> https://drafts.csswg.org/issues?spec=css-images-3&doc=cr-2012