hcaptcha has alignment issues causing ugly white background to show up in darkmode

[tilkinsc]

Reproduced on both edge and firefox. Version 1.10.1

            <HCaptcha
                sitekey="10000000-ffff-ffff-ffff-000000000001"
                onVerify={(token, eKey) => 1}
                reCaptchaCompat={false}
                />

I have dug into the html and it appears that the body of the iframe that gets injected is at fault. On the left, you can see me editing around with the style of the html as shown below. On the right thats the vanilla code you see above.

I am using vite, bootstrap, and react-router-dom. This background doesn't seem respective to those being present. Proven by deleting all the css on the page, as shown below.

[zoryana94]

Hi @tilkinsc,

Thank you for notifying us about the issue! We will keep you posted

Best Regards hCaptcha Dev Team

[Red-Killer]

Yep got the same issue looks very ugly

[anilmawji]

This is still an issue. When will it be fixed? Since it's an iframe we are at hCaptcha's mercy when it comes to the styling..

[devlsh]

@brdlyptrs if this is completed can we get a new release please? the issue still persists as of the latest version available - thanks!

[brdlyptrs]

Hi @oyed! We've updated the core code to have a transparent background for both the body and html of the checkbox iFrame. If you are still seeing an issue, can you please provide some more details so that we can take a further look?

[VlldmrS]

The problem is still relevant, it spoils the design of the form

[VlldmrS]

Next 15, Turbopack, Chakra UI

[VlldmrS]

The problem is on the iframe side. If you change the transparent background of the body to the one in the theme (for example, in my case, black), then the problem is eliminated.