jScrollPane Safari / Mac OS Bug - Scroll bar broken until refresh

[GoogleCodeExporter]

What steps will reproduce the problem?

1. The scroll bar breaks, moving off screen to the right
2. Switch pages on the same site using the nav, scroll remains broken
3. Click refresh, the scroll bar is fixed (until you change page again a
few times)
4. Works fine in Firefox

What is the expected output? What do you see instead?

Expect the scroll to work as brilliantly as it usually does.

The scroll bar goes way of screen to the right, forcing horizontal scroll
bars along the bottom and the text to run off screen.

What version of the jScrollPane are you using? On what browser? And
operating system?

Mac OS X Version 10.5.6 and Safari Version 3.1.2

Breaks with all versions of jScrollPane and most recent

Please provide a URL to a page displaying the problem.

Visit http://s217147840.onlinehome.us/main/developer/

Please provide any additional information below.

Original issue reported on code.google.com by dom%studiojuice.com@gtempaccount.com on 13 Feb 2009 at 4:03

[GoogleCodeExporter]

Hi,

It is also behaving weirdly on FF3/ PC... It renders correctly but fails to 
scroll
with the mouse wheel or when you drag the drag thingy...

It looks like you are using a really really old version of jquery. Does it help 
if
you use 1.3.1 (or even 1.2.6)? You also shouldn't need the dimensions plugin 
with a
newer jQuery...

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 13 Feb 2009 at 6:32

[GoogleCodeExporter]

Hi Kelvin,

Thanks for your support with this.

I have removed the dimensions plugin and updated to 1.3.1 but it still doesn't 
seem
to work. Is there anything else it might be? 

Cheers,

Dom 

Original comment by dom%studiojuice.com@gtempaccount.com on 16 Feb 2009 at 11:02

[GoogleCodeExporter]

Hi,

I would try simplifying your CSS step by step to see if you can find the 
particular
thing which is causing the problem.

I would start by getting rid of the position: static on #wrapper. And maybe the
position: relatve on #copy-text. Also, I notice you set top, right, bottom and 
left
on that. I don't think you can do this... I think you can only set top or 
bottom and
left or right...

By the way, I am also noticing that the mouse wheel still doesn't work properly 
on FF3.

If you figure out the CSS that is causing the problem then I can investigate 
further..

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 17 Feb 2009 at 2:01

[GoogleCodeExporter]

Hi Kelvin,

I've simplified the CSS taking any reference to "position" out completely.

I have linked the CSS for the jScrollPane from your site instead to ensure I was
using the correct version.

It still throws the same issue as originally reported.

Is there anything else we could try?

Dom

Original comment by dom%studiojuice.com@gtempaccount.com on 5 Mar 2009 at 6:31

[GoogleCodeExporter]

I was having a similar issue. I moved <script type="text/javascript"
src="js/jScrollPane.js"></script> to be the first of the script list and that 
seemed
to fix it.

Original comment by kall...@gmail.com on 8 Mar 2009 at 3:34

[GoogleCodeExporter]

Thanks Kallaur... Does that suggestion help you Dom? I've checked and your page 
is
functioning fine in Safari on PC now...

The only other possible issue is that the parent of the scrollpane is floated 
left.
Actually, I'm pretty sure that I do this in my examples and there is no problem 
so
I'm not sure what is causing the issue...

Original comment by kelvin.l...@gmail.com on 9 Mar 2009 at 2:35

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Hi Kallaur. Thank you for your suggestion. I tried moving jScrollPane.js to be 
the
first of the script list and the scrollbar broke, reverting to the default bar 
used
in Safari.

I tried taking the float off and then clearing the 3 floats with a class 
(.clear).
This hasn't worked either.

I did find something. I opened up the Safari activity window, initially it 
lists all
the scripts on first load. Then when you switch pages it isn't loading in the 
other
scripts for some reason. Any ideas if this is normal?

Thanks again for your continued support.

Dom

Original comment by dom%studiojuice.com@gtempaccount.com on 9 Mar 2009 at 10:24

[GoogleCodeExporter]

I am having the same issue.  I am a first time user of jScrollPane and am nearly
infatuated with it.  Kelvin, I read your interview and love the work you've 
done. 
Anyhow, I am not an expert at scripting, but I have narrowed the issue down to 
this...

Near line 140 of jScrollPan.js you calculate the percentInView (based on the
contentHeight and the paneHeight).  Well *sometimes* when safari loads (and 
only on
first loads - not refresh loads) the contentHeight and paneHeight are the same. 
 I
say sometimes because I can't reproduce the problem EVERY time.  But for the 
most
part, the first time I visit a page, the contentHeight and paneHeight are the 
same
value.  Hit refresh and voila!  I will explore any possible solutions, but I 
thought
I would help give a head start for anybody else.

~Ryan 

Original comment by ryan.whe...@gmail.com on 12 Mar 2009 at 3:17

[GoogleCodeExporter]

Same issue here. Ryan's comment from before seems like a valid place to explore 
to
me. Also happening in the new Safari 4 Beta.

Original comment by experien...@gmail.com on 13 Mar 2009 at 12:43

[GoogleCodeExporter]

Hi,

Thanks for the extra details - I'll look into it and see if I can find out 
what's
going wrong...

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 13 Mar 2009 at 3:13

[GoogleCodeExporter]

I hate to even post this... someone more adept in javascript might make a better
solution.  But the problem is, whenever the jScrollPane function is being called
during the page life cycle... for some reason Safari has not yet enclosed the 
content
into it's proper space.  By this I mean, safari thinks the height of the 
element is
equal to the height of the content.  This is true even before the overflow is 
set to
"hidden" by jScrollPane.  If you delay the function call say... 100 ms... it 
seems to
work... I know, I know - like I said someone might have a better solution.  
Maybe
someone could even improve my code. Here goes, and works for Safari 3.2.1 on 
PC.  

<script language="javascript" type="text/javascript">
    function initScrollPanes()
    {
        $(function()
        {
            $('.overflow').jScrollPane();
        });
    }
    if(navigator.appVersion.indexOf("Safari") > -1 ||
navigator.userAgent.indexOf("Safari") > -1)
        setTimeout(initScrollPanes, 300);
    else
        initScrollPanes();
</script>

Original comment by ryan.whe...@gmail.com on 13 Mar 2009 at 4:02

[GoogleCodeExporter]

So I had clicked for about 5 minutes trying to get it to break before I posted 
that
last post... but apparently that was not long enough.  Another five minutes or 
so,
and I got it to break once.  Right now, 400 ms seems to be working... 
unfortunately I
have to wait until I get to work tomorrow (where our internet is slow as all 
hell) to
test this more thoroughly.  I am suspicious of the connection speed being the 
main
culprit.  Oddly enough, I am not seeing any jitter with the delay in Safari.  
The
scrollbar is there when the site renders.  And for those of you with skills 
might
verify my browser detection methods... I would greatly appreciate it.

Original comment by ryan.whe...@gmail.com on 13 Mar 2009 at 4:15

[GoogleCodeExporter]

Is anyone seeing this issue on the examples on my site? I was just about to try 
and
debug it but can't reproduce it in Safari (3.2.2) on Windows with my examples...

Original comment by kelvin.l...@gmail.com on 15 Mar 2009 at 1:02

[GoogleCodeExporter]

Guys, in my experience, all your CSS files need to be ABOVE the javascript 
files in order to fix this problem.  This 
was what worked for me, and I have never had the problem again.

Original comment by nnhubb...@gmail.com on 15 Mar 2009 at 6:04

[GoogleCodeExporter]

It worked for me to put the css files above the js. Cheers!

Original comment by experien...@gmail.com on 15 Mar 2009 at 11:46

[GoogleCodeExporter]

My CSS is above the JS scripts. I tried re-ordering them and the issue still 
remains.

I can't replicate the problem on your site with the examples.

I should probably mention I am using ExpressionEngine as the CMS for this.

Original comment by dom%studiojuice.com@gtempaccount.com on 16 Mar 2009 at 1:22

[GoogleCodeExporter]

Hi Kelvin,

Do you have any other suggestions to fix this? 

The issue is still unresolved and I have re-tried all of the suggestions above.

Many thanks for your support with this,

Dom 

Original comment by dom%studiojuice.com@gtempaccount.com on 26 Mar 2009 at 2:38

[GoogleCodeExporter]

Hi Dom,

Sorry - I don't have any other suggestions :( Since I can't reproduce it with my
examples I can't really fix it... You could try using a timeout as Ryan 
suggested above?

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 2 Apr 2009 at 1:24

[GoogleCodeExporter]

The solution given by nnhubbard also worked for me - the CSS needs to be above 
the JS
in the header.

-Ryan

Original comment by weaverr...@gmail.com on 2 Apr 2009 at 6:27

[GoogleCodeExporter]

Posted a few comments about this issue on Kelvin's personal site, but have since
gained a broader perspective on my problem.

Troublmedia.org/troublmag/

user - troubl
pass - introubl

Scrollbar works correctly on first load, but breaks when one or more of the 
dependent
files loads from the browser cache, specifically in Safari on Mac. So, browsing
beyond the homepage requires a refresh to display the page properly. I'm not a
javascript programmer, so I don't know how to manipulate the way the script 
handles
caching. Help is greatly appreciated. I have gone through the solutions in the 
posts
listed above, narrowing down most other browser-specific issues to this one.

Original comment by invision...@gmail.com on 13 Apr 2009 at 6:44

[GoogleCodeExporter]

Posted a few comments about this issue on Kelvin's personal site, but have since
gained a broader perspective on my problem.

Troublmedia.org/troublmag/

user - troubl
pass - introubl

Scrollbar works correctly on first load, but breaks when one or more of the 
dependent
files loads from the browser cache, specifically in Safari on Mac. So, browsing
beyond the homepage requires a refresh to display the page properly. I'm not a
javascript programmer, so I don't know how to manipulate the way the script 
handles
caching. Help is greatly appreciated. I have gone through the solutions in the 
posts
listed above, narrowing down most other browser-specific issues to this one.

Original comment by invision...@gmail.com on 13 Apr 2009 at 6:46

[GoogleCodeExporter]

I am still experiencing the same issue, even putting in the delay. To confirm 
it is
only with Safari on mac.

Original comment by dom%studiojuice.com@gtempaccount.com on 16 Apr 2009 at 12:47

[GoogleCodeExporter]

Hi, I can confirm the same problem, Safari Mac. Loads frequently with no 
scrollbars at all, on refresh is fine. CSS 
is above JS, have tried moving things around, same behavior. Would appreciate 
any help. Firefox/Opera are fine.

Original comment by nathandfitzsimmons on 16 Apr 2009 at 8:15

[GoogleCodeExporter]

Issue 47 has been merged into this issue.

Original comment by kelvin.l...@gmail.com on 24 Apr 2009 at 6:47

[GoogleCodeExporter]

I am still stumped by this one and I don't have easy access to a mac to try and
debug... I have sent a message to the general jQuery list in the hope that 
someone
there has an idea:

http://groups.google.com/group/jquery-en/topics

In the meantime I have a few other things to check:

 * Are you all using the latest version of jQuery (1.3.2)?
 * Are you all using the latest version of jScrollPane ( $Id: jScrollPane.js 69
2009-04-24 18:03:37Z kelvin.luck $ - from either SVN here or direct from my 
site).

If the problem is definitely happening in that scenario then can you please try 
a few
things for me:

 * Try using the non-minified version of jQuery.
 * Try using an older version of jQuery (I first started getting reports of this
issue just after jQuery 1.3 came out) - you can load 1.2.6 directly from
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
 * Try using an older version of jScrollPane. As I said, this issue first started
getting reported around the time jQuery 1.3 came out - it may have been caused 
by a
change to jQuery, to jScrollPane or to Safai. You can find older versions of
jScrollPane here:
http://code.google.com/p/jscrollpane/downloads/list?can=1&q=&colspec=Filename+Su
mmary+Uploaded+Size+DownloadCount

Thanks for all your help - hopefully we can get to the bottom of this,

Kelvin 

Original comment by kelvin.l...@gmail.com on 24 Apr 2009 at 6:54

• Changed state: Accepted

[GoogleCodeExporter]

Hi,

Some more info from the jquery mailing list:

http://groups.google.com/group/jquery-en/browse_thread/thread/978ef0b2877dac77

Does it help if you move your jscrollpane initialisation to on load instead of 
on
document ready?

e.g.

$(document).bind('load', function() {
    $('SELECTOR').jScrollPane();
});

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 1 May 2009 at 6:48

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

"Does it help if you move your jscrollpane initialisation to on load instead of 
on
document ready?"

No, that actually made jscrollpane not load at all for me. Used:

$(document).bind('load', function() {
    $('.content').jScrollPane({
    scrollbarWidth:15,
    scrollbarMargin:10
    });
});

Original comment by nathandfitzsimmons on 1 May 2009 at 9:06

[GoogleCodeExporter]

hmmm... Can you verify that the load event is actually firing? If you put an 
alert in
there does it pop up?

Original comment by kelvin.l...@gmail.com on 1 May 2009 at 11:28

[GoogleCodeExporter]

I've also followed all of the above suggestions. Ryan's time delay did nothing. 
My
css always is above js. New, old packed and non-packed versions of both jQuery 
and
jScrollPane made no difference. 

To complicate matters I'm using the <a
href="http://devkick.com/lab/galleria/">Galleria</a> plugin. And I need it to 
load
after the scroller. You can see the whole thing not work in Saf <a
href="http://lolkeegan.com">here</a>.

... and @ dom.at.studiojuice, I'm also using EE and serving up the js as an 
embed,
but I profoundly doubt that it's the cms playing up on this one. 

Original comment by sne...@gmail.com on 2 May 2009 at 7:33

[GoogleCodeExporter]

Hi,

@Nathan - I just had another look at your link and it seems that there is this 
bit of
code in there: 

window.onload= function(){
 activateMenu('nav');
}

I think that is preventing jQuery from being able to bind to the load event...

@Sneers - I can see the problem happening on your page on Safari/ Windows. Not 
when I
initially arrive at the "portfolio" page or when I refresh that page but I do 
see the
issue when I move from the "archive" to the portfolio.

I am trying to see if it is a problem in jQuery in this thread:

http://groups.google.com/group/jquery-dev/browse_thread/thread/77be7025a17eed3b

Keep an eye on that to see if there is any further information...

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 3 May 2009 at 5:43

[GoogleCodeExporter]

Thanks, Kevin, I'll check that out. I was largely ignoring the original 
developer's functions. :)

Original comment by nathandfitzsimmons on 3 May 2009 at 1:10

[GoogleCodeExporter]

Much appreciated Kelvin! I'm keeping a beady eye on the thread. :)

Original comment by sne...@gmail.com on 4 May 2009 at 12:38

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Thanks for your continued support Kelvin.

Original comment by dom%studiojuice.com@gtempaccount.com on 4 May 2009 at 9:20

[GoogleCodeExporter]

Hi, Ke*L*vin, I tried removing the other onload events and even removing all of 
the other scripts and it still 
wouldn't load jscrollpane using the load bind. It does run with ready() and 
works great in all browsers except 
safari.

Original comment by nathandfitzsimmons on 4 May 2009 at 9:42

[GoogleCodeExporter]

Hi all,

@Nathan, sorry - it's the window's load event (not the document's) that you 
need to
bind to. e.g.

http://www.kelvinluck.com/assets/jquery/jScrollPane/basic_onload.html

@everyone - to verify if this is indeed the problem I would suggest putting the 
CSS
which styles the element you are applying jScrollPane to inline in your page 
(rather
than in an external stylesheet). If this helps then it will be the workaround 
(and
probably preferable to waiting for the document to load). I'll look into 
creating
something more robust in the future but this will at least allow us to 
establish that
this is the problem,

Thanks,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 5 May 2009 at 12:05

[GoogleCodeExporter]

Hi Kelvin, 
Thanks for that. It worked :) I've still got a couple of "marginal" issues, but
nothing that a bit of css should fix.
Again, thanks for taking the time to look into this.  

- Seb

Original comment by sne...@gmail.com on 5 May 2009 at 3:28

[GoogleCodeExporter]

Kelvin, thanks so much this works for me :)

Original comment by dom%studiojuice.com@gtempaccount.com on 6 May 2009 at 4:38

[GoogleCodeExporter]

Outstanding, the window onload definitely fixed this in safari. It's not bad as 
a "workaround", might just want to 
put it in the docs.

Original comment by nathandfitzsimmons on 6 May 2009 at 7:45

[GoogleCodeExporter]

Glad to hear that this is working for everyone. I will update the examples and 
docs
ASAP. It may also be worth trying the following:

* on document ready initialise the scrollpane.
* on document load reinitialise it.

That may work and give you a quick response and a reliable scroll pane. If 
there is
problems with that then I'd suggest checking for $.browser.safari in document 
ready
and initialising for all other browsers there (also check in chrome though as 
I'm not
sure if $.browser.safari == true for chrome but all webkit browsers appear to be
effected by this issue)...

Original comment by kelvin.l...@gmail.com on 7 May 2009 at 3:39

[GoogleCodeExporter]

Hi Kelvin
Thanks for all this hard work (and for jScrollPane itself, which rules). I had 
exactly this issue with safari/mac. 
That of the scrollpane element growing occasionally when jumping around 
internal links.
Here's the buggy version: http://bernardelsmere.com/makestuff/bug1/
The $(window).bind approach worked but with a juicy flash of unstyled content:
http://bernardelsmere.com/makestuff/bug2/
The inline style workaround fixed it for me, but I wanted to add what I was 
observing for your notes - 
Watching Safari's activity window while jumping around, it only happened when 
safari (seemingly randomly) 
loaded styles1.css after it was cached. 
Thanks again - all very interesting.

-Bernard

Original comment by bernard....@gmail.com on 7 May 2009 at 6:45

[GoogleCodeExporter]

Just had this problem fixed from this thread, thanks for all the input, using 
the
window load worked for me.

FYI Kelvin, you can test this with Safari on windows, it exhibited the exact 
same
naughty behaviour as on a mac, I was testing them side by side.

Cheers

Original comment by dpVitalN...@googlemail.com on 16 Jun 2009 at 11:57

[GoogleCodeExporter]

Everything worked fine for me in Safari untill I applied the jscrollpane on a 
second div, but the window load 
solved it for me too. :)))

Thanks Kelvin for all the effort and surely thanks for this kick-ass plugin!

Ralph

Original comment by r_ech...@multiarea.nl on 22 Jun 2009 at 10:13

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Thanks Kevin... after three or four hours of debuggin' you save me a lot of time
remaining

At this hours in Argentina the only thought i had was: "oh man! i love this 
guy..
it's a genius!!"

Original comment by hipolit...@gmail.com on 30 Jul 2009 at 4:01

[GoogleCodeExporter]

the solution of Comment 12 - ryan.wheale is very very nice - thank you that 
much,
cause I had the problem in Safari that the scrollbar disappear every refresh.

hug, stefan

Original comment by gst...@gmail.com on 15 Dec 2009 at 7:48

[GoogleCodeExporter]

i faced a problem that on some binding the scroll bar was hanging ,so what i 
did is
that i only used the jscrollpane along with jquery1.26 and not the latest 
jquery library

Original comment by francois...@gmail.com on 30 Mar 2010 at 7:54

[GoogleCodeExporter]

[deleted comment]