Facebook breaks centered position of Colorbox on long pages

We know the wrong doctype can affect the centered position of Colorbox. Even after changing the doctype locally, there was no difference.

Facebook seems to keep Colorbox from appearing centered in the screen on long pages.

Reproduce:

1) Visit http://apps.facebook.com/tekiki_tickets/fb/53--15-Fridays-Beach-Party

2) Click the "More" link in the description开发者_开发问答 to elongate the page.

3) Buy a ticket. Colorbox appears off screen.

However, the same code works fine on a non-FB page: http://www.tekiki.com/fb/53--15-Fridays-Beach-Party

Any clues?

Thanks!

I had the best luck in fixing this in using the latest Colorbox code from GitHub, and making sure to do this:

var cbox = $.colorbox(...);

Rather than just:

$.colorbox(...);

Facebook has some weird effects on positioning since it's in an iframe which resizes instead of having a scrollbar.

I think you need to specify the top parameter for your colorbox manually on Facebook using:

var page_info = FB.Canvas.getPageInfo();
var top = (page_info.clientHeight-heightofcolorbox)/2+page_info.scrollTop;

Where you manually set heighofcolorbox.