jQuery/iframe not working in Chrome

Question

I have created a facebook fan page here:

http://www.facebook.com/apps/application.php?id=120196931351044&v=app_120196931351044

It incorporates iframes to call certain pages/image galleries which use jquery. Everything works fine in all browsers except for Chrome. Nothing shows up in Chrome from the iframes, just empty white background.

I tried using load event instead of ready handler but still no luck.
Has anyone witnessed the similar issue in chrome?

Your help will be greatly appreciated.

The big images in the header come through iframe,a page incorporating jquery.

Update:

As shown in the comments below, it doesn't seem to work even in Safari as well.

Update 2

The same code seems to work in chrome when run outside of the iframe, here is the link to working page:

http://jsbin.com/esame4/4

Update 3:

It seems that this problem persists in chrome when using iframes as can be seen here:

http://www.google.am/support/forum/p/Chrome/thread?tid=2c81c3e3fd99b388&hl=en
http://forums.sharethis.com/topic.php?id=2742

Answer 1

The solution is actually simple. To get your iframe stuff display well in Chrome when you see a Facebook page/app, you have to call content or properties from an secured server.

You MUST ensure that all your required files and folders like the CSS, JS and image files are inside a secured folder.

1. For this you need a SSL certificate for your domain.

2. Alter your htaccess file and mod rewrite condition to force SSL for all or specific folders especially when you are using variables to call the files. If you're using absolute URL change them to https.

Hope this helps!