Page MenuHomePhabricator

hCaptcha: when challenge triggered makes entire screen white in Dark mode
Open, In Progress, Needs TriagePublicBUG REPORT

Description

What is the problem?

Editing in Dark mode, if I trigger the hCaptcha challenge it shows the dialog but most of the rest of the screen is white.

Steps to reproduce problem
  1. Find a way of triggering the hCaptcha challenge
  2. https://test.wikipedia.org/w/index.php?title=Portugal_in_the_Junior_Eurovision_Song_Contest&action=edit
  3. Enable Dark mode (open the Appearance menu and check the "dark" radio)
  4. Submit edit
Environment

Browser: Firefox 140. Chromium 141.
Wiki(s): https://test.wikipedia.org ConfirmEdit 1.6.0 (rECOE49231fb412f8) 16:36, 28 October 2025.
Editor: WikiEditor 0.5.4 (3cadd00) 07:45, 22 October 2025.

Screenshots

dark_mode_white_screen.png (820×1 px, 279 KB)

Event Timeline

We can pass theme: 'dark' in hcaptcha.render(), so we should see if that helps this situation.

I was not able to change the apperance of the captcha when passing theme=dark to the render call (I also tried other approaches without success, such as using a data- attribute).

However, I think we could use custom javascript code to resize the iframe that contains the challenge in order to prevent it from taking the whole screen (and, therefore, prevent the full document background to become white) with something like this:

let container = $('#h-captcha');
let iframe = container.find('iframe[title="Widget containing checkbox for hCaptcha security challenge"]');
iframe.width(320);
iframe.height(380);
iframe.css('top', ($('body').height() / 2) - (iframe.height() / 2));
iframe.css('left', ($('body').width() / 2) - (iframe.width() / 2));

However, if we follow this patch, the width & height to use should be computed dynamically, as the contents in the iframe are not always the same.

(it should be also possible to use a similar approach for just setting the background of the document within the iframe to black -- but I'm not sure we could make the iframe background transparent to reveal the contents behind, which would likely require using the approach for resizing it instead).

I was not able to change the apperance of the captcha to change when passing theme=dark to the render call (I also tried other approaches without success, such as using a data- attribute).

Can we try to solve that first? AFAICS we would want the hCaptcha challenge to be in dark mode when the site is in dark mode.

However, I think we could use custom javascript code to resize the iframe that contains the challenge in order to prevent it from taking the whole screen (and, therefore, prevent the full document background to become white) with something like this:

let container = $('#h-captcha');
let iframe = container.find('iframe[title="Widget containing checkbox for hCaptcha security challenge"]');
iframe.width(320);
iframe.height(380);
iframe.css('top', ($('body').height() / 2) - (iframe.height() / 2));
iframe.css('left', ($('body').width() / 2) - (iframe.width() / 2));

This seems a bit hacky and likely to cause a content flash because;

  • This JS code would need to wait for the hCaptcha challenge to be shown
  • A paint of the page would have already occurred by the time this code executes, and so for a short time the user will see the wrong version (with the large white background)
  • A paint of the page would have already occurred by the time this code executes, and so for a short time the user will see the wrong version (with the large white background)

A priori, I think that could be solved by having visibility:hidden in the hCaptcha container when it is first shown, switching it to visibility:block once we have changed its size.