1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fixed BackButton To Forum, FaceBook button not clickable

Discussion in 'Resolved Bug Reports' started by tenants, Feb 9, 2014.

  1. tenants

    tenants Well-Known Member

    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]
    Code:
    <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


    upload_2014-2-9_0-46-55.png
     
    Last edited: Feb 9, 2014
  2. tenants

    tenants Well-Known Member

    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; )
    Code:
    <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:

    Code:
    .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
     
    Last edited: Feb 9, 2014
  3. Russ

    Russ Well-Known Member

    Last edited: Feb 9, 2014
    tenants likes this.
  4. Jeremy

    Jeremy XenForo Moderator Staff Member

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

    Russ Well-Known Member

    Wrong wording choice thanks.
     
  6. tenants

    tenants Well-Known Member

    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.
     
    Last edited: Feb 9, 2014
    erich37 likes this.
  7. Mike

    Mike XenForo Developer Staff Member

    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).
     
    erich37, tenants and Russ like this.
  8. tenants

    tenants Well-Known Member

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

Share This Page