hCaptcha scrolls to top on invokation

Question

I've added hCaptcha to my website in invisible mode, and I invoke the challenge when the submit button on my form is pressed by doing

await captcha.execute({ async: true }).catch(() => { // ... }
submitForm();

However, for some reason this causes the page to scroll to the top and then it shows me the hCaptcha challenge.

How can I prevent this scrolling from happening?

Example: https://codepen.io/aisouard/pen/mdxKqZy

Please include your HTML and CSS as there is likely an issue there. — pygeek, Aug 06 '22 at 19:13
@pygeek Sure, here we go, the button is at the bottom, no CSS used at all: https://codepen.io/aisouard/pen/mdxKqZy — Axel Isouard, Aug 08 '22 at 14:09
This codepen appears to work the way you desired. I scroll to the bottom, click submit, and the hCaptcha appears (the text does not scroll to the top). — Salvatore, Aug 10 '22 at 18:07
Interesting: I've tested your codepen with Chrome, Edge and Firefox and the problem only occurs with Firefox! — johey, Aug 11 '22 at 06:48
@johey, thanks for pointing this out. Indeed, I didn't have Chrome installed to check if it would be another Firefox issue. It's a relief after realizing that, gonna find a solution and post it here later then! — Axel Isouard, Aug 11 '22 at 08:02

score 0 · Answer 1 · answered Aug 04 '22 at 10:46

0

There seemed to be a bug on Google's end, but they have fixed it a long time ago.

A workaround could be setting height in html to auto:

html {
    height: auto
}

The scrolling problem appears if you have height: 100%.

answered Aug 04 '22 at 10:46

Martin

628
1
9
28

Hello Martin, thanks for your answer! This CSS has already been applied on my side, but please note that the question is about hCaptcha which can be found at hcaptcha.com instead of Google's reCaptcha. – Axel Isouard Aug 05 '22 at 08:37

score 0 · Answer 2 · answered Aug 16 '22 at 07:11

It seems to be an issue with Firefox. This workaround can fix it seemlessly.

Make sure you don't have the smooth-scrolling behavior enabled.

html {
  /* Make sure this line is disabled! */
  /* scroll-behavior: smooth; */
}

Create a variable which will be used to store your current Y scroll position later, might be a class attribute too.

let currentScroll = 0;

At the hCaptcha initialization, point it to a callback which will be fired when the challenge will appear.

function onCaptchaOpen() {
  if (('netscape' in window) && / rv:/.test(navigator.userAgent)) {
    window.scrollTo({ top: currentScroll });
  }
}

let widgetId = window.hcaptcha.render('contact-captcha', {
  sitekey: '10000000-ffff-ffff-ffff-000000000001',
  size: 'invisible',
  'open-callback': onCaptchaOpen,
});

Then find the submit button, and store the current scroll position right before triggering a captcha challenge.

function validate(event) {
  event.preventDefault();

  currentScroll = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);

  window.hcaptcha
    .execute(widgetId, { async: true })
    .then(({ response }) => console.log(response));
}

const submitButton = $('#submit-button').get(0);
submitButton.onclick = validate;

Fixed codepen: https://codepen.io/aisouard/pen/NWYEbpp

hCaptcha scrolls to top on invokation

2 Answers2