Firefox horizontal scrollbar caused by # fb-root

Question

I am creating a responsive design, but run into a problem when the JavaScript JavaScript code for Facebook div#fb-root causes a horizontal scrollbar when the browser width is less than 590 pixels. I tested this on Chrome, Safari and Firefox, but the problem only occurs in Firefox.

Should I just set div#fb-root to display:none or is there a better way to do this?

Thanks!

---

EDIT: As requested, below is the code for how I download the SDK. When I do not load the SDK, the horizontal scroll bars disappear.

 <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'xxxxxxxxxxxxxxx', // App ID channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); // Additional initialization code here }; // Load the SDK Asynchronously (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> 

Answer 1

display: none completely fine, since the <div> not used to display anything, it is a placeholder where all FB scripts can be loaded and added to your page

Answer 2

Setting display:none made the scrollbar disappear, but when I used FB.ui (), the dialog didn't show.

I managed to solve this by wrapping # fb-root in another div:

 <div id="fbdiv" style="width:0px;height:0px"><div id="fb-root"></div></div> 

placed at the end of the body tag.

Hope someone helps.

Answer 3

As a side note, this .fb-root also breaks the sticky footers implemented with html { height: 100%; } body { display: table; height: 100%; } html { height: 100%; } body { display: table; height: 100%; } html { height: 100%; } body { display: table; height: 100%; } and footer { display: 'table-row'; width: 100% } footer { display: 'table-row'; width: 100% }

Facebook needs to fix it.

Answer 4

The problem with hiding the fb div root is when you want to use the apprequests API call. This puts the dialog for sending application requests to friends in a div. If the div is hidden, the query dialog will never be displayed. I found it hard.

You can just try setting the download width on the page or something like that.

Answer 5

I ran into this problem and tried many CSS tricks to fix it.

Setting the width of the fb root or container divs does not fix the problem. None of the overflow forms are hidden. The only thing that worked for me really makes fb-root hidden, as Zoltan said. After that, I tested the button in several different ways, and I do not see any broken functions using this method, at least for myself.

If their script button is about to break people's sites, FB really has to fix this problem from the end.

NOTE. Firefox is the only browser with which this problem occurs.

Answer 6

Here (and only in Firefox), he simply showed two small empty iframe-ish windows in the middle of my page.

I decided to use display: none , but Facebook must definitely solve this problem.

Answer 7

You can also:

 #fb-root { position:absolute; left:-9999em; } 

and do not force it to create a horizontal scrollbar. If for some reason you do not want to use display: none; , you can move it using JavaScript / jQuery if you really need it.

Answer 8

put this in your css

 #fb-root { position:absolute; left:0; top:0; visibility:hidden; }