Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lines appear on scrollbar while scrolling

  • 10 balasan
  • 13 ada masalah ini
  • 17 paparan
  • Balasan terakhir oleh semmelbroesel

more options

Hi. I'm programming something like a cash system. It is based on the bootstrap CSS framework and uses jQuery, especially the dialog part of it. In one "popup" screen (i.e. a dialog screen), I have two tables within each other - the outer table holds the headers, and inside its body is a new DIV with another table that holds the data, but scrollable while the headers stay the same. I do this by giving the inner DIV the CSS code "overflow: auto;". All of this is loaded via jQuery ajax into a jQuery dialog DIV. It works really well, but when I use the scroll wheel on my mouse, the vertical scrollbar itself does not update fast enough and produces horizontal lines directly on the inner scrollbar along the areas where the top or bottom of the scrollbar moves. This happens in the most current version of Firefox (yes, I'm using Chrome to report this, didn't think about that, sorry...), see Troubleshooting Information below. Other scrollbars seem to be OK, just this one. Any thoughts on how I can possibly fix this? Thanks!

Hi. I'm programming something like a cash system. It is based on the bootstrap CSS framework and uses jQuery, especially the dialog part of it. In one "popup" screen (i.e. a dialog screen), I have two tables within each other - the outer table holds the headers, and inside its body is a new DIV with another table that holds the data, but scrollable while the headers stay the same. I do this by giving the inner DIV the CSS code "overflow: auto;". All of this is loaded via jQuery ajax into a jQuery dialog DIV. It works really well, but when I use the scroll wheel on my mouse, the vertical scrollbar itself does not update fast enough and produces horizontal lines directly on the inner scrollbar along the areas where the top or bottom of the scrollbar moves. This happens in the most current version of Firefox (yes, I'm using Chrome to report this, didn't think about that, sorry...), see Troubleshooting Information below. Other scrollbars seem to be OK, just this one. Any thoughts on how I can possibly fix this? Thanks!

All Replies (10)

more options

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...

more options

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).

more options

Hi, jscher2000 - thanks for your reply.

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

So, is that helpful at all? :-)

more options

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%.

more options

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...

more options

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.

more options

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!

more options

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!

Diubah oleh semmelbroesel

more options

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.

more options

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!