[css-color-adjust] about:blank causes undesired flickering with dark color scheme. #9624

emilio · 2023-11-22T16:40:35Z

See the test-case here, with dark mode enabled. This happens across browsers, and per spec, and seems pretty unfortunate to me. For reference:

<!doctype html>
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<p>Shouldn't see any flickering</p>
<button onclick="reload()">Reload iframe</button>
<div id="target"></div>
<script>
let target = document.getElementById("target");
function reload() {
  target.firstChild?.remove();
  let iframe = document.createElement("iframe");
  iframe.src = `data:text/html,<meta name="color-scheme" content="light dark">`;
  target.appendChild(iframe);
}
</script>

The issue is that the initial about:blank document, which can get rendered for a split second, but maybe more if the real iframe takes longer to load, or maybe forever if you just have an <iframe></iframe> and the website injects content, matches this condition in the spec:

In order to preserve expected color contrasts, in the case of embedded documents typically rendered over a transparent canvas (such as provided via an HTML iframe element), if the used color scheme of the element and the used color scheme of the embedded document’s root element do not match, then the UA must use an opaque canvas of the Canvas color appropriate to the embedded document’s used color scheme instead of a transparent canvas. This rule does not apply to documents embedded via elements intended for graphics (such as img elements embedding an SVG document).

Authors can work around it for iframes injected dynamically via visibility or so, but that's a bit of a hack.

There ways to fix this like:

If it's an (initial only, maybe?) about:blank document, assume something equivalent to <meta name="color-scheme" content="light dark">. This could in theory break some pages that are doing <iframe></iframe> and then appending stuff to the contentDocument, so it might not be super-web-compatible, but it's not so risky with [css-color-adjust-1] color-scheme should affect embedded iframes #4772 since for pages not using color-scheme, the iframe will get a preferred scheme of light...
Maybe doing that only while there's an ongoing load somehow?
Maybe something else?

I think the first suggestion is likely to be web compatible and is the simplest, but let me know if you have other ideas, or somehow this doesn't seem worth fixing or what not.

cc @lilles @tabatkins @smfr @tomayac

The text was updated successfully, but these errors were encountered:

tomayac · 2023-11-22T17:24:53Z

I'm not sure how and, if so, where about:blank is defined, but it seems to use the following source code:

<html><head></head><body></body></html>

Are you effectively proposing the user agent stylesheet for html iff (if and only if) used in about:blank (if such thing like UA styles for this special page exist) should include color-scheme: light dark;? According to MDN, this seems to have the same effect when applied at the html level than a <meta name="color-scheme>, but I may miss nuances.

It would definitely not be web-compatible to make this the default for html everywhere, even if some popular-ish CSS resets do, but IIUC, you want to constrain this to just about:blank.

emilio · 2023-11-22T19:26:00Z

Correct, it'd be just about:blank, and potentially only the "initial about blank" (I think the html spec has a concept for that, but on my phone; gecko definitely has a bit for that), and it doesn't need to have all the side effects of the color-scheme: property, just not applying that "draw an opaque canvas" bit from the spec.

tabatkins · 2023-11-22T19:30:41Z

I don't know much about about:blank except that it's weird and often has bizarre compat constraints, but your suggestion seems reasonable to me, particularly your (1).

…ll loaded. r=devtools-reviewers,nchevobbe Much like we we do here: https://searchfox.org/mozilla-central/rev/d7f837add602d270f2b2958b3ab5206dc85965c0/devtools/client/framework/toolbox.js#2605 This is not an ideal fix but it fixes the immediate flicker. The real fix would be addressing w3c/csswg-drafts#9624 Depends on D194395 Differential Revision: https://phabricator.services.mozilla.com/D194396

…shells. This implements the proposed fix to w3c/csswg-drafts#9624, and adds a tentative test for it. Differential Revision: https://phabricator.services.mozilla.com/D194751 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1866738 gecko-commit: 1dcc9b5526c21fb2c7cc5ff2e5aaebdaf3a0648c gecko-reviewers: jwatt

…in content docshells. r=jwatt This implements the proposed fix to w3c/csswg-drafts#9624, and adds a tentative test for it. Differential Revision: https://phabricator.services.mozilla.com/D194751

…shells. This implements the proposed fix to w3c/csswg-drafts#9624, and adds a tentative test for it. Differential Revision: https://phabricator.services.mozilla.com/D194751 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1866738 gecko-commit: 1dcc9b5526c21fb2c7cc5ff2e5aaebdaf3a0648c gecko-reviewers: jwatt

…in content docshells. r=jwatt This implements the proposed fix to w3c/csswg-drafts#9624, and adds a tentative test for it. Differential Revision: https://phabricator.services.mozilla.com/D194751

…ll loaded. r=devtools-reviewers,nchevobbe Much like we we do here: https://searchfox.org/mozilla-central/rev/d7f837add602d270f2b2958b3ab5206dc85965c0/devtools/client/framework/toolbox.js#2605 This is not an ideal fix but it fixes the immediate flicker. The real fix would be addressing w3c/csswg-drafts#9624 Depends on D194395 Differential Revision: https://phabricator.services.mozilla.com/D194396 UltraBlame original commit: 8de13ec9dc9397cb816d233753e77ac5c3f94f9f

…in content docshells. r=jwatt This implements the proposed fix to w3c/csswg-drafts#9624, and adds a tentative test for it. Differential Revision: https://phabricator.services.mozilla.com/D194751 UltraBlame original commit: 1dcc9b5526c21fb2c7cc5ff2e5aaebdaf3a0648c

…ll loaded. r=devtools-reviewers,nchevobbe Much like we we do here: https://searchfox.org/mozilla-central/rev/d7f837add602d270f2b2958b3ab5206dc85965c0/devtools/client/framework/toolbox.js#2605 This is not an ideal fix but it fixes the immediate flicker. The real fix would be addressing w3c/csswg-drafts#9624 Depends on D194395 Differential Revision: https://phabricator.services.mozilla.com/D194396 UltraBlame original commit: 8de13ec9dc9397cb816d233753e77ac5c3f94f9f

…in content docshells. r=jwatt This implements the proposed fix to w3c/csswg-drafts#9624, and adds a tentative test for it. Differential Revision: https://phabricator.services.mozilla.com/D194751 UltraBlame original commit: 1dcc9b5526c21fb2c7cc5ff2e5aaebdaf3a0648c

…ll loaded. r=devtools-reviewers,nchevobbe Much like we we do here: https://searchfox.org/mozilla-central/rev/d7f837add602d270f2b2958b3ab5206dc85965c0/devtools/client/framework/toolbox.js#2605 This is not an ideal fix but it fixes the immediate flicker. The real fix would be addressing w3c/csswg-drafts#9624 Depends on D194395 Differential Revision: https://phabricator.services.mozilla.com/D194396 UltraBlame original commit: 8de13ec9dc9397cb816d233753e77ac5c3f94f9f

…in content docshells. r=jwatt This implements the proposed fix to w3c/csswg-drafts#9624, and adds a tentative test for it. Differential Revision: https://phabricator.services.mozilla.com/D194751 UltraBlame original commit: 1dcc9b5526c21fb2c7cc5ff2e5aaebdaf3a0648c

css-meeting-bot · 2024-02-14T19:04:20Z

The CSS Working Group just discussed [css-color-adjust] about:blank causes undesired flickering with dark color scheme., and agreed to the following:

RESOLVED: initial about:blank iframes are always transparent

The full IRC log of that discussion

<fantasai> emilio: This is about the inital `about: blank` page being light by default
<fantasai> emilio: since loads are async, if you have a testcase like in the issue, you see white flickering
<fantasai> emilio: This is due to color-adjust. <iframe> is usually transparent, but to fix some contrast issues, if you have light iframe in dark page, then we would paint an opaque canvase
<fantasai> emilio: My proposal is to not do that for `about:blank`
<fantasai> emilio: because authors have no control over it
<fantasai> emilio: and it just causes that kind of flickering
<fantasai> emilio: initial about:blank vs all about:blank
<fantasai> emilio: initial seems safer
<fantasai> PROPOSED: initial about:blank iframes are always transparent
<fantasai> RESOLVED: initial about:blank iframes are always transparent
<oriol> https://html.spec.whatwg.org/#is-initial-about:blank

emilio added Agenda+ css-color-adjust-1 Current Work labels Nov 22, 2023

moz-wptsync-bot mentioned this issue Nov 29, 2023

[Gecko Bug 1866738] Make initial about:blank docs always transparent, even in content docshells. web-platform-tests/wpt#43415

Merged

css-meeting-bot removed the Agenda+ label Feb 14, 2024

mozilla-apprentice mentioned this issue Feb 14, 2024

[css-color-adjust] about:blank causes undesired flickering with dark color scheme. mozilla/wg-decisions#1402

Open

chromium-helper mentioned this issue Feb 14, 2024

[css-color-adjust] about:blank causes undesired flickering with dark color scheme. chromium-helper/csswg-resolutions#359

Closed

github-project-automation bot added this to Feb 2024 Agenda Aug 26, 2024

github-project-automation bot moved this to Wednesday morning in Feb 2024 Agenda Aug 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-color-adjust] about:blank causes undesired flickering with dark color scheme. #9624

[css-color-adjust] about:blank causes undesired flickering with dark color scheme. #9624

emilio commented Nov 22, 2023 •

edited

Loading

tomayac commented Nov 22, 2023

emilio commented Nov 22, 2023 •

edited

Loading

tabatkins commented Nov 22, 2023

css-meeting-bot commented Feb 14, 2024

[css-color-adjust] about:blank causes undesired flickering with dark color scheme. #9624

[css-color-adjust] about:blank causes undesired flickering with dark color scheme. #9624

Comments

emilio commented Nov 22, 2023 • edited Loading

tomayac commented Nov 22, 2023

emilio commented Nov 22, 2023 • edited Loading

tabatkins commented Nov 22, 2023

css-meeting-bot commented Feb 14, 2024

emilio commented Nov 22, 2023 •

edited

Loading

emilio commented Nov 22, 2023 •

edited

Loading