Question

It’s going to be hard to explain because it is really weird. But I’ll do my best.

I have a scrollbar that needs to appear when the content overflow the wrapper. Simple.

But a script or a part of my html is not loading on the first time that the user visits the page. When he visits the page a second time, it works.

To see it, click on “portfolio”:
http://chuckbox.net/chromatemp/

-> The first time, you’ll not see the scrollbar
-> Click again, and you’ll see it now (and you’ll see it all the time from now)

I have this problem only with google chrome.
FYI, I use jscrollpane for the scrollbar, but I don’t think the problem is there.

Answer 1

Visiting the page shows the following:

The images don’t have their height attribute set, and the browser has to wait either for your external CSS or for the image itself before it knows the image size.

You have the following snippet:

  $(function(){
    $('#side-content').jScrollPane();
    $('#portfolio-content-wrapper').jScrollPane();
  });

It calls the jScrollPane plugin when the DOM is loaded, but this may occur before the external CSS is loaded. This means that the plugin, when it is called, doesn’t have access to its correct length unless the CSS (or all images) is already in the browser cache (and does not read it later, apparently).

To fix this, either

include the height attribute with the images: <img src=... height=240>, or

wait for the external CSS to load:

  $(window).load(function(){
    $('#side-content').jScrollPane();
    $('#portfolio-content-wrapper').jScrollPane();
  });

Alternatively, you might initialise the plugin on ready then repeat on load (if the plugin allows that).