When user clicks on "I'm not a robot" in reCAPTCHA v2, it adds a div to the page like this:

<div style="display: block; visibility: hidden; position: absolute; width: 414px; left: -10000px; top: -10000px; height: 610px; z-index: 2000000000;">

The div contains another div with gc-bubbleDefault class. It causes a so long horizontal scroll because of left: -10000px; top: -10000px;.

How to avoid Google reCAPTCHA to sabotage my website?

Look at the firebug window. you can see the div appended to the page before the body close tag.

EDIT

I found out that this problem happens just on RTL pages due to negative left -10000px of element. Shame on Google for using such an idiot idea.

Is there any solution to solve it?

When user clicks on "I'm not a robot" in reCAPTCHA v2, it adds a div to the page like this:

<div style="display: block; visibility: hidden; position: absolute; width: 414px; left: -10000px; top: -10000px; height: 610px; z-index: 2000000000;">

The div contains another div with gc-bubbleDefault class. It causes a so long horizontal scroll because of left: -10000px; top: -10000px;.

How to avoid Google reCAPTCHA to sabotage my website?

Look at the firebug window. you can see the div appended to the page before the body close tag.

EDIT

I found out that this problem happens just on RTL pages due to negative left -10000px of element. Shame on Google for using such an idiot idea.

Is there any solution to solve it?

• javascript
• jquery
• html
• css
• recaptcha

• 2 can you show working demo code.? – Himesh Aadeshara Commented Sep 29, 2015 at 12:40

3 Answers 3

I had the same problem and I solved this by adding

overflow-x: hidden;

to body element.

this article can help you throw this.

hope it can help you

Give overflow: hidden; on the div.

<div style="display: block; visibility: hidden; position: absolute; width: 414px; 
            left: -10000px; top: -10000px; height: 610px; z-index: 2000000000;
            overflow: hidden;">

So, put it inside a <div class="reCaptcha-Wrapper"> and apply these styles:

.reCaptcha-Wrapper div {overflow: hidden;}

I could see that there's a dir="rtl" in your document. That might also cause an issue. Can you remove that and check if it works? If you can't remove it, you can do it with CSS:

body > div:last { direction: rtl; }
#colorbox + div { direction: rtl; }

Or using JavaScript:

$(function () {
  $("body > div").last().css("overflow", "hidden");
});

I didn't want to mess with the parent overflow css, so my solution is to add right: 0!important to the badge:

      .grecaptcha-badge {
        visibility: hidden;
        right: 0!important;
      }

This solution should be sufficient if the wrapper has a larger width than the badge itself.