[css-mediaqueries] Inverted-colors media feature can cause problems on semi-transparent images.

[emilio]

https://drafts.csswg.org/mediaqueries-5/#inverted says:

User agents must add the following rule to their UA style sheet:

@media (inverted-colors) {
  img:not(picture>img), picture, video { filter: invert(100%); }
}

However, this causes problems for icons and similar things that are meant to be semi-transparent above the background. Also, doesn't account for other things like background-image.

Consider this straight-forward test-case. Per spec, when inverting colors, the icon is completely invisible.

Should we remove this rule, leaving it up to sites to invert only the images they want to invert? Or should we try to do something smarter?

cc @CanadaHonk @frivoal

[CanadaHonk]

This rule has caused some other minor issues for Gecko too. Also iirc Chromium did not add this UA rule when implementing the media feature (at all).

I like the idea behind it but I'm not sure it can be executed well without causing issues like these?

[tsbertalan]

On bugzilla, I posted, I posted some related info, and was requested to comment here also. The gist is that Firefox (in the current version) tries to uninvert photographs after the OS has inverted the whole screen (e.g. Windows 10's built in color filters feature). However, aside from some bugs in that implementation leaving photos inverted after the user turns off the OS inversion (that bug and siblings), such smart logic should not be applied to images that are meant to be not naturalistic photos, but UI elements or text.

Such is a broader category than semi-transparent images, but the particular place I'm seeing the issue is with formulae on Wikipedia, which will blend in with the page background (which is black to my eyes, but still captured as white by screenshots). It can be fixed temporarily by adding

.mw-invert {
  filter: invert(0);
}

in in a new style sheet in the "Style Editor" tab of the devtools for the page (I add this as a Stylus profile).

In my opinion, the browser shouldn't guess at which images are "naturalistic" and thus shouldn't be inverted--either it gives the developers information on whether the OS is inverted and lets them do their own filter:invert reactively, or (if this is deemed insecure or something), allow devs to specify some extra naturalistic-image property to tag images that should not invert (which would mean a change of standard, so also probably no-go). Since both are bad for their own reasons, I think the browser should just do the most straightforward, user-predictable thing and not second-guess the OS's inversion.

[meyerweb]

In my opinion, the browser shouldn't guess at which images are "naturalistic" and thus shouldn't be inverted… Since both are bad for their own reasons, I think the browser should just do the most straightforward, user-predictable thing and not second-guess the OS's inversion.

I agree. This does mean extra work for authors, but it’s work they should be doing anyway — and in many cases, will have to do even if the browser tries to guess which elements should be un-inverted, because it will inevitably guess wrong at some point.

[css-meeting-bot]

The CSS Working Group just discussed [css-mediaqueries] Inverted-colors media feature can cause problems on semi-transparent images., and agreed to the following:

• RESOLVED: Remove requirement for the ua stylesheet rule for inverted-colors

The full IRC log of that discussion

<Frances> Alan: Next issue is about Inverted-colors media feature
<Frances> Emilio: Seemed familiar, spec has ui style that manually applies a filter to an image and a picture and video and so on. Seems good but it is a problem for a bunch of images, if images with same color as text it is invisible. Agree to not inverting and react to preferences themselves.
<emeyer> q+
<Frances> Emilio: Unfortunate for visual images, makes sense to not invert because aligns with how we treat other user preferences.
<astearns> ack emeyer
<TabAtkins> +1 in general, auto-responding to the query is confusing (especially when there's a mix of behaviors between browsers, ugh)
<Frances> Eric: Had to do unininverting and reinvertting, browser should not be trying to guess. Authors should deal with them and not at browser level.
<argyle> q+
<astearns> ack argyle
<kbabbitt> +1 to favoring author control
<Frances> Adam: Chrome has tried automatic dark-mode, not to just invert, but intelligently invert. Should leave the value in the authors control, many edge cases and nesting scenarios.
<Frances> PROPOSAL: Remove requirement for the ua stylesheet rule for inverted-colors.
<Frances> Alan: Any objections or comments?
<Frances> RESOLVED: Remove requirement for the ua stylesheet rule for inverted-colors

[lukewarlow]

Is there a potential compat issue with removing this as Apple has shipped with it for ages?

[emilio]

My guess is not much, since it's a rather rare feature. We actually found compat issues from shipping this.

cc @nt1m @smfr tho

[lukewarlow]

Also iirc Chromium did not add this UA rule when implementing the media feature (at all).

Yeah Chrome doesn't support media feature queries in ua styles so the implementation is blocked by this rule. So from that perspective I'd love to not need this.

Bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=1467829

[cookiecrook]

Removing this would break support for a major accessibility feature on multiple platforms.

Is there a potential compat issue with removing this as Apple has shipped with it for ages?

My guess is not much, since it's a rather rare feature. We actually found compat issues from shipping this.

Not sure how you came to that conclusion... Content images (think every News site; most sites for that matter) represent the vast majority of <img> usage on the Web... and low-vision, light-sensitive users have told us over-and-over that they need the Smart Invert feature for sites that don't support dark mode.

Removing this would break Smart Invert on most websites, to account for an uncommon edge case with a transparent SVG? This type of example is the primary place where the media query should be used by the web author... In the priorities of constituency context, removing this would penalize both all SI users and the vast majority of web authors.

[Update: Clarified an earlier phrasing that may have made it seem I was ignoring background images, which are not inverted by default for the same reasons listed in other comments... Those are much more difficult to predict whether they are decorative or not.]

[cookiecrook]

@meyerweb wrote:

[removing default support for smart invert] does mean extra work for authors, but it’s work they should be doing anyway — and in many cases, will have to do even if the browser tries to guess which elements should be un-inverted, because it will inevitably guess wrong at some point.

Why make millions of developers do extra work in order to serve the vast majority of users of this feature? Most authors will not, penalizing the users.

• The defaults here get it right for the vast majority of <img> usage on the web, without intervention needed by users or authors.
• Authors can override it using the media feature in scenarios like the edge case listed above.
• Users (on Apple platforms, and maybe more) can switch from Smart Invert to Classic Invert, which results in identical GPU inversion, but without any API for native or web apps to know it's "on."

[CanadaHonk]

I suppose WebKit continues to agree with spec even with the PR merged. It doesn't say engines must not have the rule, rather engines do not have to have this just to implement the media query itself, so it could be an engine decision whether to do it or not? (Or if someone really wanted a pref somewhere too?)

[nt1m]

@CanadaHonk The current wording doesn't really allow for UAs to add a rule. It probably should at least allow that: "User agents may add ...". But based on what James said, I think it would be best to make this rule mandatory, if users don't like it they can always disable "smart invert" on the relevant platforms.

[lukewarlow]

Fwiw I agree that it's a beneficial default style but I also do wonder if

the fact authors probably need to do changes to make this work fully (handling shadows for example), combined with the fact chrome can't add media feature queries to their UA styles without a change that based on my (admittedly limited) understanding would be non-trivial

make it acceptable for this to be up to the UA?

[emilio]

Removing this would break Smart Invert on most websites, to account for an uncommon edge case with a transparent SVG? This type of example is the primary place where the media query should be used by the web author... In the priorities of constituency context, removing this would penalize both all SI users and the vast majority of web authors.

I don't think it's quite "an uncommon edge case with a transparent SVG". Contentful images are not uncommon. For example, this breaks all equations in wikipedia.

If you use smart invert and go to https://en.wikipedia.org/wiki/Equation#Description in Safari (or Firefox release for that matter), you'll just see black space where the equations and symbols are supposed to be.

Sure, the site can fix it, and Wikipedia probably would if prompted to do so, but I think the failure mode (making the content completely invisible, no signal there was anything there), plus the fact that the site isn't really doing anything wrong, it's just the UA messing up the page, doesn't seem quite the right trade-off to me, even if the rule gets things right in 90% of the cases.

[emilio]

^ Is an example of the above in Wikipedia (left is Firefox Nightly, right Safari). It's un-inverted because macOS' screenshot tool somehow didn't account for the color inversion.

After a bit more casual browsing in Safari I also noticed this causes very low contrast on a lot of other pages (the icons in https://www.mathjax.org for example are invisible or almost invisible), so are the icons in Safari's developer tools.

[nt1m]

I wonder if the solution here is a special rule for SVG rather than removing the smart invert rule altogether.

[nt1m]

Something like:

@media (inverted-colors) {
  img:not(picture>img):not([src*="svg"]), picture, video { filter: invert(100%); }
}

[emilio]

Semi transparent PNG's are also affected. Also your rule wouldn't cover stuff like srcset, or <source>...

In general what you'd want is to only un-invert opaque images. One nice thing of doing it via CSS is that authors can override it if needed, but I'd tend to think that, would I be the one to implement this, maybe pushing it a bit further down and just make it magic / use the engine's knowledge about whether the image is opaque to decide whether to un-invert would be better here?

[cookiecrook]

In general what you'd want is to only un-invert opaque images.

brainstorming… new pseudo-class selector?

img:opaque {}
img:not(:transparent) {}

[emilio]

Maybe? It wouldn't really need to be exposed outside of user agent stylesheets. But that exposes one more bit from the (potentially cross-origin) image data to the embedder page, which might or might not be fine (@annevk had opinions on that iirc?)

[annevk]

Yeah, that seems bad. Perhaps we can make it a property instead? auto-invert: on | off or some such? That gives web developers control, without revealing when it happens.

[frivoal]

Reopening, on account of https://github.com/w3c/csswg-drafts/issues/9674#issuecomment-1901037121 and subsequent discussion.

[cookiecrook]

@emilio gave some good examples of bugs that should be resolved, either by the Wikipedia and MathJax site owners or with an update to the query. I've filed the WebKit one here: https://webkit.org/b/271959.

I also want to illustrate what would be taken away from users if this inversion feature were removed from the UA style sheet. At the risk of stating the obvious, photographs are one of the most common image formats, and people have expectations that they should not be inverted.

Sites like the New York Times (which has never adopted dark mode, btw) would go from this (as shipping today):

Back to this:

And browser vendors would start getting loads of bug reports about the regression.

Users have grown to rely on this "Smart Invert" feature for a long time in the Web... It's been shipping for 8 years (well before prefers-color-scheme) and works desirably in most web pages. Let's fix the newly reported issue of these transparent SVGs and PNGs without breaking the feature en masse.

[emilio]

For the record, we removed this and we haven't seen any regression report so far. We did get reports about the missing mathjax formulas on Wikipedia, tho.

[lukewarlow]

I guess one thing to say is it might not be considered a regression by users as Firefox haven't shipped (at least until very recently?) that media query and UA rule, whereas WebKit has for years.