google +1 button adds scroll bar to my site

Question

I have had a google +1 button on my site for more then a year and it all worked fine.

In the last couple of days this button started to create a horizontal scroll bar on my site.

I know that beacase when I remove the button the scroll bar disappears.

Here is my site: www.kitchen-guide.co.il

Any suggestions what should I do?

Thanks!

Answer 1

Google's +1 button is adding the following iframe to the end of the page body:

<iframe name="oauth2relayXXXXXXXXX" id="oauth2relayXXXXXXXXX" src="https://accounts.google.com/o/oauth2/postmessageRelay?parent=http%3A%2F%2Fwww.example.com#rpctoken=XXXXXXXXX&amp;forcesecure=1" style="width: 1px; height: 1px; position: absolute; left: -100px;"></iframe>

One workaround (to this Google bug) can be to include the following rule in your CSS:

iframe[id^="oauth2relay"] { left: auto !important; right: -100px !important; }

If your website is all RTL then it should work fine, but if it's also LTR (multilingual) you will have to somehow target that role on RTL pages only. Check resizenow.com.

Answer 2

The iframe is no longer used to render the information bubble. therefor, the previously suggested solution will not work anymore.

To fix the issue define the data-onendinteraction callback attribute.

<div class="g-plusone" data-onendinteraction="gplusoneinteraction"></div>

Then, implement the interaction callback function:

window.gplusoneinteraction = function(params) {
    $('iframe[id^="oauth2relay"]').next('div').css({left: 0, right: '-10000px'});
}

Answer 3

borrowing from superware's answer, was having the same problem... however, this worked for me:

iframe[id^="oauth2relay"] { position: fixed !important; }