In case it is an artifact of hardware accelerated graphics, could you try disabling that feature?

You usually need to restart Firefox in order for this to take effect, so save all work first (e.g., mail you are composing, online documents you're editing, etc.).

orange Firefox button or classic Tools menu > Options > Advanced

On the "General" mini-tab, uncheck the box for "Use hardware acceleration when available"

If you restart Firefox, is the issue resolved? If so, there might not be anything you can change in your code to solve it. If not, hmmm...

Ah, so I CAN upload images... Thought I'd add one to show my point. On the left, the regular scroll bar. On the right, the messed up one after using the mouse wheel to scroll up from the bottom of the page. (The same happens when grabbing the scrollbar, just in blue).

Hi, jscher2000 - thanks for your reply.

Yes, with hardware acceleration disabled, the issue goes away.

So, is that helpful at all? :-)

Yes, images can be uploaded with replies. It is on the "to do" list to support image uploading with the original question.

Since the issue is Firefox's interaction with the graphics driver, you could add a note to any FAQ for your app about the artifacts, but unless you find a workaround, that might be all you can do. Mozilla has been working on ironing out hardware acceleration glitches since the release of Firefox 4, and one card driver update last year caused a rash of posts here, so it's an area that might never be 100%.

Thanks again for the response.

Just wondering - any idea why this is happening only inside this DIV and not on any other scrollbar?

I have the exact same table/DIV structure in another box, but that is in a fixed position in the flow of the page, and it is much shorter. Do you think it may have to do with the height of the scrollbar since it spans nearly the entire page height, or could it be because it is located inside a jQuery dialog?

If we can figure out what causes it for this case, I might be able to program around it somehow...

You might look for anything that could cause rounding such as a height or line-height that doesn't compute to a whole pixel measurement, but that's just a guess.

Hm, the height of that box is calculated by percentage, so that could be the issue. But I'm not sure how to solve that in CSS... I may have to tell the outer dialog box to calculate a height that can be divided by my percentage and create a full number.

Well, I have something to go on - thanks so much!

I'll post here probably tomorrow if it worked!

Hm, it was a good thought, but now the height of the DIV with the scrollbar is set to 641px on my screen, and line-height is 16px - so unless it has trouble calculating scrollbars using a prime number as maximum height, there might be something else going on... (FYI, I was wrong - it was not percentage, it was all jQuery coded)

EDIT: Setting it to 640px didn't help, either, so at least we know it's not an issue with a prime number. It was a long shot, anyway ;-)

I'm off for today, but hopefully there might be more ideas here tomorrow.

Thanks!

You could poll some web developer types on the unofficial forum here: mozillaZine Web Development board. (Separate forum, separate registration.) They likely will want a test case to play with.

I might have to, but I'll have to significantly clean up my code and find a way to make it available online somewhere... But it's worth a shot.

Thanks so much for your help!