jScrollPane 2.0 height problem in chrome

Question

I am using a div with class scroll-pane (height 100%) within an absolute positioned div. The scroll-pane div contains some text first, followed by an image and followed by some text again. The image height is set to 200px. Problem is! If I view the scrollpane in Chrome (latest Version) I sometimes can scroll the complete content and sometimes, after refreshing the site in the browser, not. Not does mean that I can only see a part of the second text and not more. So the actual scrolling height shrinks. If I refresh again I might be able to see it all complete again and so on. It changes every time I refresh the browser. It only happens in Chrome.

Any idea what I can do to avoid that behavior? Thanks.....

UPDATE It really got something to do with how the imports (js and css) are lined up in the header. You are right, the css got to be imported before the jscrollPane js but that also means that the image height need to come from one of the css stylesheets. You can not define the height right within the image tag in your markup. My solution was to create a class, for i.e. img200 (representing a height of 200px) in my stylesheet and that made the trick. So here again what need to be done to make it work in Chrome or better webkit Browsers in general: Set up a image height class in your stylesheet for images that are used within a scrollPane. Include your stylesheet before!!!!! the javascript for jScrollPane. Add the special height class to all pictures you include to a jScrollPane That was it. Thanks again for your fast answer. Very cool.

FINAL SOLUTION UPDATE!!!!!!!!!
If you have pictures within a jScrollPane area you have to make sure the following in order to have it all displayed well in webkit browser, like Chrome or Safari. Otherwise it will cause height problems and only a part of your content will be visible.
This is what you have to do:
Make sure the line up of your css stylesheets and the jScrollPane javascript file is correct. The jScrollPane javascript file need to follow your css stylesheets and not the other way around! Also you have to add a height to each image that is included in the jScrollPane area. You can do this either by creating a css class or you can add the dimension as an attribute directly to the img in your html markup.
If you keep that in mind it will do the trick.

Answer 1

Did you also test in Safari? This sounds like an issue that occurs in Webkit when the javascript is included before the CSS in the head of the document: http://jscrollpane.kelvinluck.com/faqs.html#webkit-broken

If that isn't the cause then it might be something related to the fact that you have an image in your scrollpane. You need to either include the width and height of the image (see http://jscrollpane.kelvinluck.com/image2.html) or autoReinitialise the pane (see http://jscrollpane.kelvinluck.com/image.html).

Hope it helps :)

Answer 2

give the call to jscrollpane in $(window).load instead of $(document).ready

Answer 3

I have also discovered that adding a css rule to .scroll-pane for line-height solves my height issues.

For example:

.scroll-pane {line-height: 1;}

or whatever line height your content may need.

I also discovered that if you use @font-face, jscrollpane may do the height calculation before your font has properly loaded, and therefore miscalculate. I fixed this by adding the setting:

autoReinitialise: true

It runs on a timer though so use thoughtfully.

Answer 4

If you have image inside your jScrollPane div area, simply define its width and height.

<div class="scroll-pane">
<img src="image.jpg" alt="" width="300" height="50" />
</div>

That will fix the jScrollPane's webkit bug. Oh and of course load the CSS before JS