fixed position element causes distortion when scrolling

Question

Hi,

On this page there's a black logo box on the right of the page whose position is fixed. The divs that hold the photo and the main content area have their position set to relative. In Firefox 3.5, if you scroll up and down the page, you'll notice a really ugly distortion in the relatively positioned divs - it appears as though the content is being squashed and stretched.

Update: I added the fix to the page linked above, so it no longer shows the distortion. Remove the overflow: auto property from the fixed-position element if you want to see it in action.

Thanks, Don

Answer 1

Add overflow:auto to the fixed-position divs.

If it still doesn't work, there's probably not much you can do about it - it's just a bug/deficiency with Firefox's (re)drawing. Fixed elements are often problematic - Opera back around version 8 was incredibly slow when scrolling any page with a fixed element or background.