Javascript acting differently on different hosts

Question

I'm using Lightwindow v2 in a Symfony project to create a modal window (here is the plugin I'm using). The modal window works perfectly on my local wamp server. But when I access the page from my remote AWS server, the "greyed out" background element of the lightwindow is too short--it covers the part of the screen that is initially visible but if you scroll down then the rest of the screen isn't greyed out (which makes it look quite crappy).

Using Firebug I'm able to see that the greyed out overlay is given a different height value, which explains why it's too short. But I'm puzzled by this, since one would imagine that the Javascript would render the same, regardless of the host, since it's a browser-side scripting language.

Can anyone imagine a reason this problem could be occurring?

Answer 1

I'm not sure, but maybe your JS code tries to read browser window size which could be possible for local HTML pages but not for external websites?

Answer 2

Due to loading time differences between your local WAMP server and your remote server, the page rendering may be happening at different speeds. Your overlay may be getting rendered prematurely, before the browser fully renders the page to its maximum height.

Are you rendering the modal window as soon as the page loads? If so, can you try adding some delay to see if that helps?