ScrollBars in Facebook App - 2013 breaking changes

Question

My Facebook app (iframe / fluid / Fluid) shows a horizontal scrollbar. All attempts to remove it have failed.

I've tried all the solutions posted here, regarding FB.setAutoGrow(), FB.setSize(), etc... with no luck, but I found something interesting:

The scrollbars that appear are not related to my application, but related to the commercials at the side.

In the image you can see what I'm talking about:

• To the left is a portion of my Iframe App. While the Iframe has been correctly resized (I've checked with Firebug - right) and their sizes are all right, there's that horizontal scrollbar at the bottom that affects the whole facebook window (not just my iframe).

• The highlighted item on Firebug is what causes the horizontal scrollbar. They don't belong to the pagelet div (the div where the iframe resides): It's part of the carousel of recommended games to the right ! (and its width is > 5000 pixels).

• When I first launch my app, there are no scrollbars fora little time interval, like 500ms, then they suddenly appear.

• FB.Canvas.setSize , FB.Canvas.setAutoGrow seem to work, if I invoke them manually, they do resize the iframe, etc. but they don't remove the scrollbar.

• I have body:overflow=hidden.

• (may be related?) My app uses itself another iframe, width and height 100%, that is where the action takes place. That other iframe also has overflow=hidden.

• This has traditionally worked. I stopped paying attention to Facebook for a couple months, then I saw this yesterday :(

What can be happening? My guess is somehow Facebook thinks my app needs horizontal scrolling, removes overflow-x:hidden in the main body in order to allow it, but this intererferes with their carousel that expects a hidden overflow... I don't know if this problem is at all my fault or a Facebook Bug.

Answer 1

Fortunately, this bug has been solved by Facebook. Everything is working now.