Firefox scrolling stutter and bleed

[Cher]

I have written my page beautifully (so I think anyway) but when I scroll through the page in Firefox 1.5.0.1 the text "bleeds"; the paragraphs and images will appear from the bottom, duplicate for a split second and stay stationary, then catch up and scrolls for a bit more.

I looked around online and I found another page that does the same thing (not my page, but one from 2004). If you scroll through using Firefox 1.5 the page scrolls fine until you get to his code examples, then the stuttering occurs. Once you get past the codes the page scrolls as normal again.

I've tried on two different computers, both with 1.5.0.1 and can duplicate the issue every time. Obviously it doesn't happen all the time, since the paragraphs on the example page don't have any issues.

Anyone have a fix to correct this, possibly CSS? I checked the bugzilla database for Firefox and the closest I could find was #301159, but that was back in July of last year.

[edited by: rogerd at 3:06 am (utc) on Mar. 3, 2006]
[edit reason] No links/URLs, please. [/edit]

[DrDoc]

What in your code triggers this behavior?

[Robin_reala]

I've seen this but usually only in combination with a fixed alpha transparent PNG.

[Sam_C]

I've seen it too, usually on pages that contain large images which have been resized by means of HTML. If there's just a couple of images it isn't usually a problem but any more than that and scrolling becomes a problem.

[kaled]

Non-scrolling background-image?

Behaviour of this sort will occur when scrolling requires the whole page to be redrawn instead of merely the invalid region. Normally, scrolling copies the valid part of the window image to the required new location and simply renders the new area.

Rightly or wrongly, it sounds like Firefox believes that optimised scrolling (as described above) cannot be used. Either that, or the area being rendered is very complex.

Kaled.

[Cher]

Well I did some more testing on a third pc and the stuttering text and images doesn't occur, so it may just be the two other machines. I do extensively use png images with transparency, but in Photoshop I save them as png-8 because IE can't handle png-24 properly.

I'll have to switch a few images to gif to see if the same thing happens :) thanks for the ideas.

I don't have any background images on the page. The background is just a solid color so that's not it. The page does have multiple styles that users can switch and only 1 of the styles has this stutter. The other 2 work just fine (one w/ the page and graphics set in an iframe, and the other text-only with img set for display:none).

All of my image width and heights are displayed as the exact width/height that the image was saved as, so it's not a dynamic resizing problem too.

[DrDoc]

Then it is not an alpha transparency issue, as 8-bit PNGs do not include alpha transparency.