How to resize reCaptcha popup image?

HTML & CSS
1

I have a problem with reCaptcha 2 popup size . It’s too big in mobile view.
Now… I am not talking about the “I’m Not A Robot” box (all answers I have found on the net seem to talk about scaling that little grey box).
I am talking about the actual Image Select Pop-Up Frame where you have to click the images and pass a google test.
I tried several methods for hours and I really can’t understand how to decrease that image/popup size.

here is my code:

<?php if ($this->config->get('security.captcha') && ccommentHelperSecurity::groupHasAccess($user->getAuthorisedGroups(), $this->config->get('security.captcha_usertypes'))) : ?>
						<div class="<?php echo ($formAvatar) ? 'offset1 span11' : 'row-fluid'; ?> ccomment-actions"
							 v-show="active">
							<div class='muted small'>	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ja_wall/css/recaptcha.css" />
								<div class="g-recaptcha" id="rc-imageselect" >
								<?php if ($this->config->get('security.captcha_type') == "recaptcha") : ?>
																					
								<div class="ccomment-recaptcha-placeholder">
							
									</div>   
									
									
										</div>
									
								<?php else : ?>
									<div>
										<?php echo JText::_('COM_COMMENT_FORMVALIDATE_CAPTCHATXT'); ?>
									</div>
									<div class="ccomment-captcha">
										<?php echo ccommentHelperCaptcha::insertCaptcha('jform[security_refid]', $this->config->get('security.captcha_type'), $this->config->get('security.recaptcha_public_key')); ?>
										<input type='text' name='jform[security_try]' id='security_try' maxlength='5'
											   tabindex='4' class='ccomment-captcha-input required'/>
									</div>
								<?php endif; ?>
							</div>
						</div>
					<?php endif; ?>

I created a css file called recaptcha.css so that I can apply css styles through it.
I put several classes in this file and tried them, but none of them worked. All the classes I tried only affect the “I’m not a robot” box and none of them could change the size of the popup image.
here is an example of my recaptcha.css that is not working the way I explained above:

.g-recaptcha {
	transform:scale(0.77);
	-webkit-transform:scale(0.77);
	transform-origin:0 0;
	-webkit-transform-origin:0 0;
}

#rc-imageselect {
	transform:scale(0.77);
	-webkit-transform:scale(0.77);
	transform-origin:0 0;
	-webkit-transform-origin:0 0;
	}

I would be grateful for any help

2

This may not be the issue, but worth being aware. You no longer need those browser prefixes, unless someone is using a browser from 10 years ago. If you insist on keeping them, they must go before the rule without the prefix, which should be last.

Better:-

.g-recaptcha {
    -webkit-transform:scale(0.77);
    transform:scale(0.77);
    -webkit-transform-origin:0 0;
    transform-origin:0 0;
}

#rc-imageselect {
    -webkit-transform:scale(0.77);
	transform:scale(0.77);
    -webkit-transform-origin:0 0;
	transform-origin:0 0;
	}

Better Still:-

.g-recaptcha {
    transform:scale(0.77);
    transform-origin:0 0;
}

#rc-imageselect {
	transform:scale(0.77);
	transform-origin:0 0;
	}

But now I actually look at the code and think about it. Transform probably won’t help you, because it works like relative positioning, in that the space that the element takes in the document flow goes unchanged. So although reduced in size, it would still create screen overflow.

Also I can’t help thinking, with reCaptcha being as popular as it is, you can’t be the only person to face this issue, it is exists.
Have you tried this on an actaul mobile device, as opposed to using dev tools on a desktop? I just find it har to believe Google havn’t accounted for this.

2 Likes
3

Hi Sam,
Thanks for reply.
When I add Transform code directly in my website via google inspect, it’s working. But when I trying to apply it via a css class it’s not working. It’s like Google recaptcha rewrite it.
If there is a way to reduce the size of the iframe related to the recaptcha image, the problem will be solved. Because this iframe takes 100% of the width of the phone and when the recaptcha image is loaded in it, sometimes its location is not correct or its height is much higher than the phone screen.
You can see it my site or test it : http://test6.harfrooz.com
(open an article and click on comment section to see recaptcha)

Also I can’t help thinking, with reCaptcha being as popular as it is, you can’t be the only person to face this issue, it is exists.

So I hope we can find a solution? because I wasn’t successful after a lot of try.
Maybe I put my class in a wrong place of php code?

Have you tried this on an actaul mobile device, as opposed to using dev tools on a desktop? I just find it har to believe Google havn’t accounted for this.

Yes, I try it on two mobile phones and the problem exist.

4

I’m not sure what you are saying but none of those .g-recaptcha styles will take effect because #rc-imageselect has the same rules applied and as it is an ID it carries 100 times more weight than a simple class.

You cannot over-ride the property values of an ID using a simple class.

Instead you would need to do this.

#rc-imageselect.g-recaptcha {
/* new rules here */
}
1 Like
5

Hi Paul. Thanks for reply.

I’m not sure what you are saying but none of those

I meant of that sentence, was this line:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ja_wall/css/recaptcha.css" />

but I tried your code and it still not working for popup size.
To be clear about my problem, please take a look at following image:

cap
cap1374×924 341 KB

2 Likes
7

Actually, about this issue, I found something in two comments of another site that may help the issue. (But I have no idea where to put this fix inside my code. Please help if you know)
here is that comment:

comment 1:

I’ve noticed that the #rc-imageselect element is located in an iframe and thus out of reach of css styles on the home page. It might be possible to apply something via javascript, but it would need to be triggered after the iframe loaded. Any thoughts?

comment 2:

Nitrox
AUGUST 18, 2016 AT 3:01 PM
This solution did not work for me. reCaptcha dynamically inserts a DIV into the DOM when a user clicks on the checkbox which prompts photo selection popup. The #rc-imageselect container is within an iframe loaded inside the dynamically inserted DIV and I could not target it with just the css media query.
I ended up using a jQuery/JavaScript workaround. It works by detecting (via MutationObserver) when a DIV is inserted and targeting inserted DIV. Then if it’s a small screen (mobile devices), then scale the popup.
This is what I used:

// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
for (var i = 0; i < mutation.addedNodes.length; i++) {
if (mutation.addedNodes[i].tagName == 'DIV') {

var thediv = mutation.addedNodes[i];
var sw = window.screen.width;

if(sw < 667) {
$(thediv).css({"transform" : "scale(1.9)", "transform-origin" : "0 0", "-webkit-transform" : "scale(1.9)", "-webkit-transform-origin" : "0 0"});
}

}
}
});
});

// pass in the target node, as well as the observer options
observer.observe(document.body, {
attributes: false,
childList: true,
characterData: false
});
8

Can’t help with the JS but I was also going to say that the images are not part of that recaptcha div and are added as a separate element at the bottom of the page.

The only thing I could see is that the iframe has a title where one of the words in the title says recaptcha so I think you may be able to get it using the following code.

@media screen and (max-width: 600px) {
  iframe[title*="recaptcha"] {
    transform: scale(0.7);
  }
}

That seems to work for me in shrinking the element but whether there are other problems it remains to be seen as that recaptcha doesn’t work very well on my iphone as the screen doesn’t scroll when its active.

1 Like
9

Wow! It actually worked. That was a easy and perfect solution. Thanks Paul.
Also do you think it is possible to make the frame around the photo smaller to remove the empty space around the photo?

 recaptcha doesn’t work very well on my iphone as the screen doesn’t scroll when its active.

Yes, the fact is that the main reason why I wanted to reduce the size of the recaptcha was that the scroll was not working. And I don’t know how to fix that scrolling problem.
The interesting point is that I tested the site’s captcha on an old phone with a very old browser, and scrolling worked there! Is it possible that this failure is related to the following error?

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/feature/6662647093133312
preventDefault @ jquery-1.7.1.min.js:3299
_wheel @ iscroll.js:725
proxy @ jquery-1.7.1.min.js:775
dispatch @ jquery-1.7.1.min.js:3063
handler @ jquery.mousewheel.js:81

I have been seeing this error in Chrome for a long time and apparently there is a simple solution, but no matter what I tried, I could not fix it.

10

The only way would be to use the :has selector which isn’t supported in Firefox yet and then you could make the outer div smaller and size the iframe to match without scaling.

e.g.

iframe[title*="recaptcha"] {
  transform: scale(1);
  width: 100% !important;
}
div:has(> iframe[title*="recaptcha"]) {
  width: 90% !important;
  margin: auto !important;
}

Your options are limited so it’s a choice you have to make.

1 Like
12

Oh, This is perfect. And as you mentioned it isn’t supported in Firefox.
But can we separate the code in two parts, to use the older method for Firefox, and this new method for Chrome? by using CSS or any other method?

13

This is a bit ‘out there’ but you could try this method.

/* for browsers that don't support : has */
iframe[title*="recaptcha"] {
  transform: scale(0.7);
}

div:has(> iframe[title*="recaptcha"]) {
  width: 90% !important;
  margin: auto !important;
}
/* we use :has to target the element and over-ride the non suported browsers values*/
div:has(> iframe[title*="recaptcha"]) iframe[title*="recaptcha"] {
  transform: scale(1);
  width: 100% !important;
}

I’ve only just thought that up so will need testing. It seems to work locally but unable to test on Firefox right at this minute as away from home until tomorrow,

First you set the rule for all browsers and then you use the :has selector to change the parent and then also use :has in the rule to restore the child to its previous setting.

1 Like
14

I tried this method, but as you can see on the site, unfortunately, the results were not very good. I also tried to change the numbers, but again it was not very satisfying.
Maybe I have to focus on solving the reCapcha’s scroll problem. It’s just frozen on page always.

15

OK. I just wanted to update that I fixed this error which I mentioned before.
But, Still, Captcha Scroll doesn’t work. Probably it’s related to “Display” or “scroll-behavior” in CSS ?

My opinion is this:
we have two popups. The first popup where the article is loaded. And the second pop-up, which is related to the captcha security image. Now, when the second pop-up is displayed, the scroll related to the first pop-up should be disabled and the scroll of the second pop-up should be activated. But we can’t see such behavior in practice? Am I right? Can this be fixed?

16

I notice that on widths less than 600px you hide the overflow which is what is stopping the scroll.

Try adding this code.

@media screen and (max-width: 600px) {
  body.popupview #popup-inner {
    overflow: auto !important;
  }
}

Here’s a screenshot from my iPhone where I have injected that code live and scrolled the captcha into view.

image
image750×1334 184 KB

1 Like
17

Wow! Thanks Paul. It’s really great that you find the problem source. I changed the code and it’s really working!
But it seems this created a new problem! :expressionless: A very long white page is created under the recaptcha and a second scroll on the left side of the scene. as you can see it on the site!
is there any solutions for this new issue?

19

:slight_smile: quote=“sashaiel, post:17, topic:409002”]
A very long white page is created under the recaptcha and a second scroll on the left side of the scene. as you can see it on the site!
is there any solutions for this new issue?
[/quote]

I only see a white space at the bottom of the iframe but that seems to be as the iframe is controlled by a script and a large height has been set. It also seems to be because the iScroll is transforming the element upwards and creating a blank space.

We are fighting too many things here. Everything is overwritten by the scripts you are using making it hard to change things easily especially with modals inside modals (!!). I also note that on the desktop the captcha images no longer appear when you click I am not a robot.

Firstly I would ditch the iScroll altogether as it doesn’t seem to be supported anymore and was created when mobile phones were in their infancy. Messing with scrollbars is always bad for user experience and in all the attempts I’ve seen none are working well and never produce a better user experience.

You have a transitional doctype which trips quirks mode and layouts can be broken so I would suggest moving to the html 5 doctype.

You will of course have a second scroll because you have a popup in a popup. It may be that you can set direction ltr but that may mess up the language. You could also try a smaller height in the popup as it is set to 100% which may or may not work properly anyway.

@media screen and (max-width: 600px) {
  body.popupview #popup-inner {
    overflow: auto !important;
   direction:ltr;
   height:80vh!important;
  }
}

If you have access to the css in that iframe you may try to stop the transform from working with this code.

#container.wrap{transform:none!important;}

However I think if you ditched iScroll you would probably find that everything starts working as it should. :slight_smile:

1 Like
20

Hi Paul,
Honestly, I tried all day to somehow fix the problem of the white space under the captcha, but I didn’t get any results. Now I just feel that I really hate this google captcha! :smile: :expressionless:

I don’t know exactly how to do this. I tried to delete the file, but it messed up the main grid of the site, and I’m afraid that manipulating that file will cause me more problems than captcha!

I know what you saying and I apologize about that.
And regarding the captcha’s images not being displayed, it was my fault because I had raised its security level so that the pop-up images would appear more easily!

I had seen that error, but I didn’t know how to fix it because my site is entirely with php and I don’t know php either. But I am still trying to find a solution.

direction: ltr didn’t work and It had a conflict with moo tools I think.
height:80vh!important; didn’t work also, because It decrease popup height but had no effect on the white empty space.

I did not understand exactly where to put this code. I tried it in several places and it only disabled the page scrolling.

I think in the end, if we can’t solve this free space problem, it might be better for me to delete Google captcha, or to return with the same incomplete state (overflow: hidden) as before . :face_with_diagonal_mouth:

21

Both worked for me and did what they were supposed to. I injected the code dynamically but maybe you put the code in the wrong place. I realise it’s not an easy task and there may be other things going on.

That would have gone inside the css for the iframe page but if that is not under your control (or expertise)
then it would have an adverse effect outside that context.

That means you can’t use it at all as opposed to the fixes I gave where you. All your overflow:hidden does is cut short the div and stops it scrolling. With my fix you can at least scroll and just see some extra whitespace at the bottom. I know which I would prefer :slight_smile:

You would have needed to delete the iScroll js file and the iScroll css files or references to it in your css. You really should have a test server where you can try out all these changes without messing up the current site. That iScroll is a pain as it hijacks normal operation for little reward.

Sorry I can’t offer anything better but there’s only so much I can do from here :slight_smile:

1 Like
22

:confused: quote=“PaulOB, post:21, topic:409002”]
Sorry I can’t offer anything better but there’s only so much I can do from here :slight_smile:
[/quote]

Hi Paul,
First of all, I want to thank you very much for all the help you gave me and the time you spent. Your tips helped me a lot. :heart:

I have already applied these codes on the site and you can see the result. I don’t know where my mistake is, but it still hasn’t solved the problem, and that big white area is still there.

I only see following codes in templates.css and theme.css for iframe. I also tried your code in body.popupview #popup-inner iframe { but had no effect.

/* iFrame */
body.popupview .youtube-player {
  width: 100%;
}

/* iFrame video */
div.content .youtube-player {
  margin-bottom: 10px;
}
body.popupview #popup-inner iframe {
	transform:none!important;
	width: 100%;
  right: 0 !important;
}

  .fb_iframe_widget span {
    width: 450px !important;
  }

  .fb_iframe_widget iframe {
    width: 100% !important;
  }

I really want to solve this issue and also use your final fix. And I probably will, even with that blank white page. But the problem is that the extra whitespace is sometimes very long and looks really bad. Its length is equal to 2 complete white pages. If you test several times, you will probably see this situation.
I really wonder why this issue occurs and how to solve it :confused:

23

This happens mostly when the security image appears. Can we set a maximum height for that image? Maybe the problem will be solved?