reCaptcha breaks layout in both Chrome and Safari (inacceptable feature!)

[Nabi]

Hi,

I am facing the same problem reported here: http://www.silverstripe.org/form-questions/show/286014
Here is the relevant part:

I have a recaptcha on a contact form. It works fine on everything
except Google Chrome and Safari, where it creates a gap under the
recaptcha and breaks the html layout.
When I look at it with Chrome's Developer Tools, I see that the
Recaptcha has created an empty iFrame (src=about:blank) and when I
remove the iFrame using the "delete this node" option, it fixes the
design. I can't see the empty iFrame when I look at the page source
and Firebug doesn't see it either.

The iFrame seems to be added by chrome or recaptcha javascript and it
looks like this:

<iframe src="about:blank" style="height: 0px; width: 0px; visibility:
hidden; border-top-style: none; border-right-style: none; border-
bottom-style: none; border-left-style: none; border-width: initial;
border-color: initial; ">This frame prevents back/forward cache
problems in Safari.</iframe>

If I remove this iframe with "delete this node" then everything is
just fine!

So the questions are:
1. why is this iFrame added?
2. Who is adding this iFrame?
3. How can I get rid of this iFrame?

To me this feature is inacceptable. reCaptcha should never break the
design.
I would even call this a bug - as far as I did not misunderstand
something...

Thanks,
Nabi

[Nabi]

it is very sad to see that nobody, also not the google recaptcha guys,
are interested at all in this issue.
I really seems to be a bug - and no, it is not a feature!

[Adrian Godong]

1. There is something inside the iframe tag which may give a clue about why it is there: "This frame prevents back/forward cache problems in Safari."

2. I don't see this on the ASP.NET plugin, so possibly it is added by the respective plugin author. Do you have a URL that has this iframe? And which plugin do you use?

3. Ask the plugin author (if it is indeed added by the plugin).

--
You received this message because you are subscribed to the Google Groups "reCAPTCHA" group.
To post to this group, send email to reca...@googlegroups.com.
To unsubscribe from this group, send email to recaptcha+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/recaptcha?hl=en.

--
Adrian Godong
adrian...@gmail.com

[Luke Yates]

As Adrian has pointed out, there is a reason given within the frame
itself as to why it is there.

I am curious as to why you think the iframe is being added by
reCaptcha... it isn't anywhere near the reCaptcha code on that page!

Regarding the layout of the page, if you used slightly better code,
the page layout would probably remain constant between browsers.

Personally, I would be looking for a piece of jQuery which has
something like "if ($.browser.safari)" which then outputs the iframe
just before your footer.

Don't mean to seem too blunt, but I think the problem lies in your
code, not reCaptcha's.


On Nov 4, 1:24 pm, Nabi <nabi.zam...@googlemail.com> wrote:
> Thank you!
>
> Here is the URL with the bug:http://www.nabisoft.com/contact
> As you can see the footer is not where it should be (only in case of
> Chrome and Safari).
>
> I use the Java Plugin, but this should not be the issue since it is
> generating always the same output. And, or course, it is not differing
> between the different browsers. I believe that the google/recaptcha
> javascript files that are loaded dynamically by the browser are
> responsible for adding this iframe in case of Safari/Chrome.
>
> The only output from the Java Plugin is:
>
> <script type="text/javascript">
> var RecaptchaOptions = {theme:'red'};
> </script>
> <script type="text/javascript" src="http://www.google.com/recaptcha/
> api/challenge?k=6LcteL0SAAAAAGqKyiN-CWjzIeHFBNpd6pfU7eYV"></script>
>
> As you can see no iframe at all. That means the Javascript code loaded
> from google is adding the iframe! And I believe it should not add it!

[Nabi]

come on guys...

let me explain it again:
i am not generating any html output that contains that iframe!
if you want to see what i generate then simply make a right click and
view the source. this is exactly the source that the server is sending
to the browser! as you can see there is no iframe at all! or can you
see any iframe???? NO!

Only if you use Chrome's Developer Tools then you will see that
suddenly that iframe is available. As I have analyzed it comes
definitely from the google javascript!

by the way:
the recaptcha javascript is modifying the html structure on the fly!
maybe you want to check it yourself!#

Don't mean to seem too blunt as well, but I think the problem cannot
lie in my code. just compare the html code via:
1. in chrome browser right click and view the source
2. use Chrome's Developer Tools to check the source (which displays
the dynamically changed html code)

you will see that there is a difference!

Where can I report the bug???

[Adrian Godong]

OK, I confirm that I can reproduce this <iframe> on my own pages as well (it's not directly after the recaptcha, that's why I didn't see it).

The reason why it broke your layout may be caused by the fact that you're using a relative positioning (which you may already know).

My best advice as a web developer is to:

(1) remove this relative positioning (do you need it for anything?) and use a more static approach, or

(2) write a JS to move the iframe to the end of your HTML body, or

(3) use a different captcha

To be honest, I think it's quite reasonable for recaptcha to put an iframe on body level. Assuming that your site follows a simple semantic rule of "an element per line", an invisible iframe on that line shouldn't break any layout.

On Thu, Nov 4, 2010 at 06:24, Nabi <nabi....@googlemail.com> wrote:

Thank you!

Here is the URL with the bug: http://www.nabisoft.com/contact
As you can see the footer is not where it should be (only in case of
Chrome and Safari).

I use the Java Plugin, but this should not be the issue since it is
generating always the same output. And, or course, it is not differing
between the different browsers. I believe that the google/recaptcha
javascript files that are loaded dynamically by the browser are
responsible for adding this iframe in case of Safari/Chrome.

The only output from the Java Plugin is:

<script type="text/javascript">
var RecaptchaOptions = {theme:'red'};
</script>
<script type="text/javascript" src="http://www.google.com/recaptcha/
api/challenge?k=6LcteL0SAAAAAGqKyiN-CWjzIeHFBNpd6pfU7eYV"></script>

As you can see no iframe at all. That means the Javascript code loaded
from google is adding the iframe! And I believe it should not add it!

--

You received this message because you are subscribed to the Google Groups "reCAPTCHA" group.
To post to this group, send email to reca...@googlegroups.com.
To unsubscribe from this group, send email to recaptcha+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/recaptcha?hl=en.

--
Adrian Godong
adrian...@gmail.com

[Nabi]

Don't mean to seem too blunt but i really have the feeling you are not
very familiar with web development...

(1) have you tried it? It you would have tried it, then you would not
come up with such a suggestion...

(2) i am not going to do that, because it would only be a workaround.
in other browsers that iframe is not available, it should also not be
available in chrome and safari.

(3) i dont get your point here... i want to use recaptcha and nothing
else.

>>To be honest, I think it's quite reasonable for recaptcha to put an iframe
>>on body level. Assuming that your site follows a simple semantic rule of "an

>>lement per line", an invisible iframe on that line shouldn't break any
>>layout.

Of course it makes sense to put an iframe to the body - but thats not
the question. The question is "why is google doing this and how can i
get rid of this?".
The iframe might be set to invisible via css ("visibility: hidden;"),
but doing it this way will still break the layout. The style arritbute
currently looks like this:

style="height: 0px; width: 0px; visibility: hidden; border-top-style:
none; border-right-style: none; border-bottom-style: none; border-left-
style: none; border-width: initial; border-color: initial;"

If you add "display:none;" then it won't break the layout:

style="height: 0px; width: 0px; visibility: hidden; border-top-style:
none; border-right-style: none; border-bottom-style: none; border-left-
style: none; border-width: initial; border-color: initial;

display:none;"

Try it in your Chrome's Developer Tools - you will see. But
"display:none;" should be added by google and not by me (if we look
away from the fact that this iframe is nonsense).

[Adrian Godong]

(1) Yes I have, and I have multiple websites that use reCAPTCHA without this problem. This problem is very likely specific to your usage of position:relative. I am not paid by Google/reCAPTCHA, and you're obviously not paying me. So if you don't like my suggestion, just ignore it. You're doing a personal attack on someone who's giving you a (*free*) support.

(2) If you don't want to do this, there's alternative (3)

(3) If it breaks your layout, why use it?

On Sat, Nov 6, 2010 at 03:52, Nabi <nabi....@googlemail.com> wrote:

If you add "display:none;" then it won't break the layout:

If this works, I'm sure the reCAPTCHA guys will implement it. But in the mean time, you have to do something with your own site, right?

 

away from the fact that this iframe is nonsense).

Like I said on the first reply, it's there for a reason (which you may not experience/understand yet).

--
Adrian Godong
adrian...@gmail.com

[Bircher]

I found that post through google and I had the same problem so I just
hide all the iframes except .iframe ones.

iframe {display:none;}
iframe.iframe {display:block}

You'll just have to set iframe as a class for all your real iframe but
you're not supposed to use iframe that much.

On Nov 7, 1:14 am, Adrian Godong <adrian.god...@gmail.com> wrote:
> (1) Yes I have, and I have multiple websites that use reCAPTCHA without this
> problem. This problem is very likely specific to your usage of
> position:relative. I am not paid by Google/reCAPTCHA, and you're obviously
> not paying me. So if you don't like my suggestion, just ignore it. You're
> doing a personal attack on someone who's giving you a (*free*) support.
>
> (2) If you don't want to do this, there's alternative (3)
>
> (3) If it breaks your layout, why use it?
>

> On Sat, Nov 6, 2010 at 03:52, Nabi <nabi.zam...@googlemail.com> wrote:
>
> > If you add "display:none;" then it won't break the layout:
>
> If this works, I'm sure the reCAPTCHA guys will implement it. But in the
> mean time, you have to do something with your own site, right?
>
> > away from the fact that this iframe is nonsense).
>
> Like I said on the first reply, it's there for a reason (which you may not
> experience/understand yet).
>
> --
> Adrian Godong

> adrian.god...@gmail.com

[colonelTigh]

To workaround this problem with JQuery:

var x = $('iframe').get(-1);

$(x).remove();

Parameter "-1" = index of the element in the DOM (-1 means the last occurrence).

In my page, recaptcha blank iframe appears in the bottom of the page (last iframe element in the code), so I used "-1" as parameter to the GET method.

If it is the first iframe in your page, use parameter 0, if it's the second one use 1, etc.

Establish the index of the iframe in your page and apply it to the parameter.

[Azhar]

This is Work! Thankyou very much! :)

Actually, it's happen only in page use reCaptcha in my website. And it's disturb my page layout (give extra distance between footer and the end of the page).

[Danny Goncalves]

I am not using position relative on my site and i got the same issue however this solution seems to work properly 

iframe {display:none !important;}
header iframe,
section iframe,
footer iframe,
div iframe { display:inline; }

If you don't have any other frames on the site to worry about, a simpler version should suffice:

iframe {display:none !important;}

For me it  doesnt work since im using on the same page more iframe, its simply a bug.

[Danny Goncalves]

I found a solution that might work for people using other iframes on the same page

was posted by user "Eleven cool" on another thread so credits goes to him

iframe[src="about:blank"] {

display:none;

}

Here is the reference to the thread if you want to see it for yourselves.

https://groups.google.com/forum/?fromgroups=#!topic/recaptcha/Hjt71gWiKQI

Cheers

[Muazaim Ali Ashraf]

It's making my html invalid because the iframe contains <html> and <body> tags..

[Aster Leegwater]

Using the recaptcha in my website also created extra distance between footer and end of the page in Chrome and Safari.
Thanks for the tips to hide the iframe with css, this solved my problem!

[Jackson Turner]

Works like a charm.  Thanks for the info.