reCaptcha z-index interfering page elements

Hi Irb-sites,

I haven’t actually seen this issue before so I’m not 100% sure what the cause of it could be. I just set up a test envrionment on my end, and it does look like the same div is created.

From what I can see, the div that gets generated by the recaptcha form doesn’t have some of the necessary styles assigned to it.

The container that is generated on my end has the following styles:

border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px; position: absolute; left: 0px; top: -10000px; transition: visibility 0s linear 0.3s, opacity 0.3s linear; opacity: 0; z-index: 2000000000; visibility: hidden; background-color: rgb(255, 255, 255);

If you add those exact styles to the div generated on your end, you’ll see things work as intended.

The main issue appears to be that your container is set to display: fixed; where-as it should be set to display: absolute;.
Can you temporary test with a different theme to see if the issue persists?

Thanks,
Evan

Thanks for your quick reply, Even.

I did try it with a different theme and it works. On both themes, however, the container div that is generated is set to display: absolute; It then has four child divs, the first of which is set to display: fixed.

The container that is set to display:fixed is the issue.

Well if it’s working with other themes, then it’s something in your theme that is causing the conflict.

You’ll most likely have to do some debugging to figure out what’s going on. Form what I can see, the theme is a custom theme that you’ve built – and is a child theme of Art Bees (https://themeforest.net/user/artbees) – which itself is a premium theme purchased from theme forest.

With any theme conflicts, especially those purchased from theme forest, we recommend that you reach out to the theme author and ask them what they think the conflict may be. They would have a better idea than us since they put things together.

Will do. Thanks for your help.