1885787 - In dark mode, clicking on a google / bing search result to a page that's not fast may flash a blank white page (because of intermediary page to track the click)

Status: NEW

(Web Compatibility :: Site Reports, defect, P2)

Description

[Jim]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:123.0) Gecko/20100101 Firefox/123.0

Steps to reproduce:

1. Go a search engine that uses a middle-man page to track clicks (Google, Bing)
2. Click a link that goes to a page using a dark theme

Actual results:

If any of the pages (click tracker or final site) is slow to respond, there is a blank white page that is displayed (usually for a second or less). A "flashbang."

Expected results:

The blank interstitial page that is displayed prior to the site rendering should use the theme the browser/OS are set to. Chrome does this.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Theme' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Ardelean Oana, Desktop QA [:oardelean]]

Hello, thank you for the bug report!
Unfortunately I could not reproduce your issue. Would you be so kind as to answer a few questions so we can investigate this further?

• Could you please give an example of a url/website where you’ve seen this issue happening?
• Do you use a Dark Reader add-on?
• Does this issue happen with a new profile? Here is a link on how to create one: https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles
• Does this issue happen with latest nightly? Here is a link from where you can download it: https://www.mozilla.org/en-US/firefox/channel/desktop/
• Does this issue happen when Firefox is in Troubleshoot Mode? Here’s a link on how to enable it: https://support.mozilla.org/en-US/kb/diagnose-firefox-issues-using-troubleshoot-mode#w_how-to-start-firefox-in-troubleshoot-mode

Thank you.

Comment 3

[Jim]

Hi Ardelean Oana,

(In reply to Ardelean Oana, Desktop QA [:oardelean] from comment #2)

• Could you please give an example of a url/website where you’ve seen this issue happening?

Going out from one site using a dark theme to any site that uses a dark theme (such as Google or Reddit [may need to be logged into the site to use dark theme]) that uses a "middle-man" link between the sites, often used to track clicks.
Here are examples using Google search:
https://www.youtube.com/watch?v=zTkes3c4e6s
https://www.youtube.com/watch?v=RZaXcfAQP5E

I also checked the middle-man link and it does have a dark theme as well but you generally don't see it as it tens to redirect very quickly. But if the destination site takes a bit to load, the white flash happens.

The same issue happens on Bing with dark mode enabled. Yahoo doesn't have a dark theme; I was not able to replicate it there. Search engines like DuckDuckGo and Startpage don't have middle-man urls. If they are tracking clicks it is likely via a script that doesn't cause any flash.

• Do you use a Dark Reader add-on?

No

• Does this issue happen with a new profile? Here is a link on how to create one: https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles

Yes: https://www.youtube.com/watch?v=_Db3LBc4aMw

• Does this issue happen with latest nightly? Here is a link from where you can download it: https://www.mozilla.org/en-US/firefox/channel/desktop/

Yes: https://www.youtube.com/watch?v=dDzptcV-hog

• Does this issue happen when Firefox is in Troubleshoot Mode? Here’s a link on how to enable it: https://support.mozilla.org/en-US/kb/diagnose-firefox-issues-using-troubleshoot-mode#w_how-to-start-firefox-in-troubleshoot-mode

Yes: https://www.youtube.com/watch?v=yYBIQFdqbjs

For comparison, here is the same when using Chrome:
https://www.youtube.com/watch?v=EZIHY-R2xUo
https://www.youtube.com/watch?v=1-ZFqyrI5os

Comment 4

[Emilio Cobos Álvarez (:emilio)]

I can reproduce the white flash with bing.com going to e.g. github.com, but:

• The intermediate page that I get does not have a dark theme: https://gist.github.com/emilio/8c65d7d4c04f2161d7eee5417702f841
• I don't seem to get sent through bing.com/ck/... in chrome.
• In Google, I seem to get a similar redirecting page (and thus I can repro) only if I'm not logged in, otherwise I get a direct link.
• The google.com page also doesn't seem to have a dark theme meta tag or anything:

<html lang="es"> <head>   <script nonce="j7WkW_Bf7ZYFe4Og27EJ6g">window.google = {};(function(){
var c=this||self;var e=function(b){this.g=b};e.prototype.toString=function(){return this.g.toString()};
var f=/^\s*(?!javascript:)(?:[a-z0-9+.-]+:|[^:\/?#]*(?:[\/?#]|$))/i;c.google.navigateTo=function(b,d,a){!/\/.*?[&?]gsc=1/.test(d.location.href)&&b!==d&&b.google?b.google.r&&(b.google.r=0,b=b.location,a instanceof e?a=a instanceof e&&a.constructor===e?a.g:"type_error:SafeUrl":a=f.test(a)?a:void 0,void 0!==a&&(b.href=a),d.location.replace("about:blank")):d.location.replace(a)};}).call(this);(function(){var redirectUrl='https://github.com/rust-lang/rust';google.navigateTo(parent,window,redirectUrl);})();</script> <noscript> <meta content="0;url=https://github.com/rust-lang/rust" http-equiv="refresh"> </noscript> </head>  </html>

• In chrome, I also don't get a navigation to this page. Instead, I see chrome sends a text/ping request to the google.com/url ping, and then navigate directly to github.com. Thus, chrome also doesn't suffer from this issue

So my thoughts at this point are that both Google and Bing (when logged out, at least) are using a different mechanism to track the click on Firefox than on Chromium-based browsers. But Firefox's behavior is reasonable, afaict, given what we're given.

That said, this seems like a usability problem that might be worth digging into. Tom, James, do you know if we've looked into this kind of thing before?

As a hacky but quick solution, they could just add a <meta name="color-scheme" content="light dark"> to the intermediary navigation page. But I wonder why do they do that navigation in the first place.

If we don't know about this particular difference, we could try to contact Google and try to get some more data on why they do this. In any case, this bug doesn't belong to the Themes component. Moving to web compat for now. If we're missing an API or something we can file dependent bugs as needed.

Comment 5

[James Graham [:jgraham]]

At least for Google, the underlying problem is effectively Bug 951104; they use <a ping> for link tracking in Chrome but not in Firefox (presumably) because we don't enable it.

Comment 6

[Jim]

Attachment: google-web-search-redirect-page.png

(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)

• The google.com page also doesn't seem to have a dark theme meta tag or anything:

<html lang="es"> <head>   <script nonce="j7WkW_Bf7ZYFe4Og27EJ6g">window.google = {};(function(){
var c=this||self;var e=function(b){this.g=b};e.prototype.toString=function(){return this.g.toString()};
var f=/^\s*(?!javascript:)(?:[a-z0-9+.-]+:|[^:\/?#]*(?:[\/?#]|$))/i;c.google.navigateTo=function(b,d,a){!/\/.*?[&?]gsc=1/.test(d.location.href)&&b!==d&&b.google?b.google.r&&(b.google.r=0,b=b.location,a instanceof e?a=a instanceof e&&a.constructor===e?a.g:"type_error:SafeUrl":a=f.test(a)?a:void 0,void 0!==a&&(b.href=a),d.location.replace("about:blank")):d.location.replace(a)};}).call(this);(function(){var redirectUrl='https://github.com/rust-lang/rust';google.navigateTo(parent,window,redirectUrl);})();</script> <noscript> <meta content="0;url=https://github.com/rust-lang/rust" http-equiv="refresh"> </noscript> </head>  </html>

This is the page I get:

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Redirect Notice</title><style>body,div,a{font-family:arial,sans-serif}body{background-color:#202124;margin-top:3px}div{color:#fff}a:link{color:#c58af9}a:visited{color:#c58af9}a:active{color:#ff7769}div.mymGo{border-top:1px solid #3c4043;border-bottom:1px solid #3c4043;background:#171717;margin-top:1em;width:100%}div.aXgaGb{padding:0.5em 0;margin-left:10px}div.fTk7vd{margin-left:35px;margin-top:35px}</style></head><body><div class="mymGo"><div class="aXgaGb"><font style="font-size:larger"><b>Redirect Notice</b></font></div></div><div class="fTk7vd">&nbsp;The previous page is sending you to <a href="https://github.com/">https://github.com/</a>.<br><br>&nbsp;If you do not want to visit that page, you can <a href="#" id="tsuid_1">return to the previous page</a>.<script nonce="TETTxkQER5obUjTBgAqdWA">(function(){var id='tsuid_1';(function(){document.getElementById(id).onclick=function(){window.history.back();return!1};}).call(this);})();(function(){var id='tsuid_1';var ct='originlink';var oi='unauthorizedredirect';(function(){document.getElementById(id).onmousedown=function(){var b=document&&document.referrer,a="encodeURIComponent"in window?encodeURIComponent:escape,c="";b&&(c=a(b));(new Image).src="/url?sa=T&url="+c+"&oi="+a(oi)+"&ct="+a(ct);return!1};}).call(this);})();</script><br><br><br></div></body></html>

The attached screenshot shows there is a dark theme, though it doesn't use a meta tag, just an inline stylesheet with dark colors. Why is it not rendering? Maybe the http location header is causing Firefox to redirect prior to it rendering?

But I wonder why do they do that navigation in the first place.

I suspect it's to track clicks on the result links. Why don't they use something like a beacon? Probably since their site works even without javascript and a beacon wouldn't work to track clicks in that case. Why do they use the ping attribute? Probably because it is essentially a beacon without needing javascript to work... but they serve an altered site to Firefox since it is not supported.

Comment 7

[Thomas Wisniewski [:twisniewski]]

No, I haven't seen this specific issue before, but I suspect the antitracking team might be interested. I'll let them know.