Why is there excessive whitespace with Facebook mo

Question

I have been struggling with why the Facebook comments module on some of our pages have excessive whitespace on them when the pages are viewed with a mobile browser.

After debugging for hours, I'm now singled out the specific code and it still repros. I initially thought it was due to Twitter Bootstrap but I've compared it with and without it, and the same bug occurs.

Compare this one that has bootstrap: http://jsfiddle.net/trevin/uW8fz/

and this one which does not: http://jsfiddle.net/trevin/uW8fz/

Both exhibit the same problem.

If you are not signed in, you'll see like 200px of whitespace underneath. However, if you are signed in, you'll see the first comment plugin, then a huge amount of whitespace.

I have no idea what's causing this.. any ideas? Is this a bug in the FB mobile comment plugin?

Answer 1

I had the same problem and finally found out that adding mobile="false" to the div element solved my problem for the mobile fb comment box and the extra white space at the bottom.

Answer 2

Looks like this is a bug with Facebook. An inline style is being added that sets a height. See more on this answer.