Fixed BackButton To Forum, FaceBook button not clickable

[tenants]

In fact, all links below the facebook button become un-clickable (at xenforo.com, this is only the g+ button)

I'm not really sure if this is a xenforo implementation bug or a fb bug, either way it causes an issue with xenforo (especially if you have links below the share button)


To reproduce, use chrome:

1) Go to xenforo.com/community
2) Click on a forum category
3) Click the browser back button to return to the forum home (xenforo.com/community)

- Some times you will notice the facebook button and Google + buttons are un-clickable
(try hovering over and clicking the g+ button)

You may need to try this 4 or 5 times to reproduce it (I seem to reproduce it every time)

It seems the Facebook button is rendering with an iframe 1000px x 1000px

- This is particularly bad when sidebars have the sharebuttons above other clickable content

[You can force this bug by simply using firebug and replacing your facebook iframe with the problematic code below]

<iframe name="f356958624" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="http://www.facebook.com/plugins/like.php?action=recommend&amp;app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D40%23cb%3Df2864d550c%26domain%3Dxenzine.com%26origin%3Dhttp%253A%252F%252Fxenzine.com%252Ff1763b3d24%26relation%3Dparent.parent&amp;color_scheme=light&amp;font=trebuchet%20ms&amp;href=http%3A%2F%2Fxenzine.com%2Farticles%2Flana-pop-art.122%2F&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey" style="border: none; visibility: visible;"></iframe>

When this happens, it's not possible to click any of the data below the facebook button

 

[tenants]

It might just be temporary (slowloading of facebook API making this more obvious?)

When the facebook iframe loads correctly, the width and height are defined by the iframe inline style (width: 124px; height: 20px; )

<iframe name="fc61f248" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="http://www.facebook.com/plugins/like.php?action=recommend&amp;app_id=146201428725181&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D40%23cb%3Df13631b298%26domain%3Dxenforo.com%26origin%3Dhttp%253A%252F%252Fxenforo.com%252Ff3c310da%26relation%3Dparent.parent&amp;color_scheme=light&amp;font=trebuchet%20ms&amp;href=http%3A%2F%2Fxenforo.com%2Fcommunity%2F&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey" style="border: none; visibility: visible; width: 124px; height: 20px;" class=""></iframe>

So, one of the things I've found you can do to solve this issue, is temporary define a height & width on the share-button-iframes until the iframe style is updated:

.sharePage iframe
{
width: 200px; // not using max-width / max-height, since no restrictions should be put on these iframes
height: 20px;
}

This is then displayed (with no content, not causing any overlap issues) until the API updates the iframe and overrides these parameter values with the inline style values

 

[Russ]

I posted the scroll bug a few days ago, they called it a service design issue, curious if a container around it would be reasonable.

http://xenforo.com/community/threads/page-scroll-bug-facebook-share-this-page.68114/

 

[Jeremy]

It is a service issue, not a design issue. Service issues are out of XenForo's control.

 

[Russ]

It is a service issue, not a design issue. Service issues are out of XenForo's control.

Wrong wording choice thanks.

 

[tenants]

I posted the scroll bug a few days ago, they called it a service design issue, curious if a container around it would be reasonable.

http://xenforo.com/community/threads/page-scroll-bug-facebook-share-this-page.68114/

A container around it wont work since the iframe is positioned with "absolute".
You have to define the width & height of the iframe, since this is used greedily by Facebook until it then updates the height/width with inline styles

.sharePage iframe
{
width: 200px;
height: 20px;
}

I've fixed it here by doing such a a thing:
http://xenzine.com/articles/mini-v-linear-actuator-build.203/

You can imagine it would be a real issue for me (and other plugins) if none of the links below the share buttons could be clicked (every time the back buttons was used) ... So it can be much worse than just seeing extra scrolling, part of the page becomes unusable. It's caused by a Facebook issue, but that doesn't mean we can't avoid it.

 

[Mike]

After attempting to reproduce this yesterday and failing, I stumbled into it as I was checking something today. I've applied this tweak here now (for 1.3).

 

[tenants]

I can confirm the fix, I can no longer reproduce it here