I just discovered a rather annoying little problem that only seems to happen within Firefox (which is quite unusual since Firefox is usually the good guy in my opinion).

At this moment I can't absolutely confirm the problem is on Firefox's end and not in jQuery, but since the code works flawlessly in both Internet Explorer *and* Opera, I am left to assume it's likely in Firefox's end.

First, a little background to what I'm doing here. I've been doing some major updates to the functionality and performance of Theia's chat module. One thing that I finally wanted to do away with was removing a checkbox option that used to exist which allowed the chat user to un-tick if they wanted to scroll up through the messages without having the chat system constantly scroll them to the newest messages on every refresh.

I finally came up with a great solution: determine where the user is currently scrolled to, while keeping that value in memory, and if their scroll position is the same as the scroll height, it means they are already at the end (with the newest messages) and thus the auto-scroll should kick in. The idea here is to allow users to freely scroll through the chat text without having to manually click something to turn off the scrolling.

Well, here was the code I came up with:

"JAVASCRIPT" CODE

function chatAutoScroll (force)
    {
    if ($("#ChatRoomMessages").attr("scrollTop") == lastChatScrollHeight || force)
        {
         $("#ChatRoomMessages").animate({ scrollTop: $("#ChatRoomMessages").attr("scrollHeight") - $('#ChatRoomMessages').height() }, 500);
        }
    lastChatScrollHeight = ($("#ChatRoomMessages").attr("scrollHeight") - $('#ChatRoomMessages').height());
    }

As I said, in IE and Opera the above code works flawlessly - and since I am using a jQuery animation to perform the scroll, it looks great too!

There is, however, a slight hitch which only happens in Firefox. It took me a long time to even realize it existed because you'd have to do something in specific to trigger it.

It seems at first as though it works great it Firefox too, but that is until you scroll through some older messages, and then scroll back to the end. Now all of the sudden auto-scrolling doesn't seem to work - but why?

Well, after alerting out the values of the current scroll position and the maximum height, it becomes obvious what is up: the scroll bar in Firefox will return your scroll position as one pixel over what the height() jQuery call returns as the maximum!

For example, if the height of the scroll area was being reported as 366 pixels, and you are scrolled all the way to the end of the scroll bar, then Firefox will say your scroll position is 367, thus breaking the code.

Since I've been unable to find a cause for why this happens, and since I'm not even clear if it's a problem with Firefox or jQuery, and since I am sick and tired of wasting countless looking, but not finding, the answers, I've just used the following work-around:

"JAVASCRIPT" CODE

function chatAutoScroll (force)
    {
    if ($("#ChatRoomMessages").attr("scrollTop") == lastChatScrollHeight || ($("#ChatRoomMessages").attr("scrollTop") == (lastChatScrollHeight + 1)) || force)
        {
         $("#ChatRoomMessages").animate({ scrollTop: $("#ChatRoomMessages").attr("scrollHeight") - $('#ChatRoomMessages').height() }, 500);
        }
    lastChatScrollHeight = ($("#ChatRoomMessages").attr("scrollHeight") - $('#ChatRoomMessages').height());
    }

 

All that has been changed is that there is now an additional condition which can be met, in which if the scroll position is one pixel over the height, then it should also be treated as "being at the end" and invoking the scrolling animation.

 

Kinda tacky, I know. I hate doing stuff like this, but the sad reality is that it often seems necessary to get browsers to cooperate. Normally I think of Firefox as doing things better than the rest, but this is a situation which has left me a little bit puzzled. >_<

 

I hope this helps someone out there!

 

Oh, and if anyone happens to know why this might be occurring, please share because I'm quite interested in knowing where this discrepancy comes from (jquery, firefox, or heck, even my code).