Closed Bug 492052 Opened 15 years ago Closed 15 years ago

Fixed Positioned DIV flickers on page-scroll when set for Overflow: Visible

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Version:
1.9.1 Branch
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED FIXED

People

(Reporter: scott, Assigned: roc)

References

(
URL
)

Details

(Keywords: regression) 

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b4) Gecko/20090423 Firefox/3.5b4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b4) Gecko/20090423 Firefox/3.5b4 (.NET CLR 3.5.30729)

I have set up a menu on my web site that sits at the top of the screen with 'position: fixed;' Works great in 3.5b4 for Mac, but in Windows and Linux the menu div flickers when you scroll the page.

It looks as if the browser starts to scroll it with the rest of the page (which it shouldn't, being position: fixed) and then quickly moves it back into place.

If I set the div to overflow: hidden, the problem goes away, so it apparently only occurs on fixed divs with overflow set visible.

Reproducible: Always

Steps to Reproduce:
1) Go to http://www.scottbradford.us/ in Firefox 3.5b4 (Win or Lin; problem does not occur in Mac OS X).

2) slowly scroll the page down.

3) As the menu switches to position: fixed, and you keep scrolling, the menu flickers and moves incorrectly.
Actual Results:  
The divs that are supposed to be fixed-positioned at the top of the viewport flicker and move improperly, then are quickly moved back into place, creating a jarring effect.

Expected Results:  
The fixed-positioned divs should stay fixed at the top of the viewport, regardless of the overflow setting!
Correction: setting to overflow: hidden does not actually seem to fix it, but setting to overflow: auto (which is behaving the same as hidden) does.

I'm baffled.
Version: unspecified → 1.9.1 Branch
Flags: blocking1.9.1? → blocking1.9.1-
I've noticed this only occurs when you have more than one element set to position: fixed.

For instance, if I create a fixed header in a layout, it works fine. However, if I create a fixed footer as well, the bug presents itself.
Flags: blocking1.9.2? → blocking1.9.2-
Try with latest trunk, it may have been fixed by compositor-phase-1 landing.
I can confirm that the latest nightly build has the issue fixed, at least on the website I have anyway.
I just installed today's German nightly, and the problem is still there.
It would be fixed in mozilla-central nightlies, but not mozilla-1.9.1 nightlies.  I'm not sure where to get a German build, but I'd guess it's mozilla-1.9.1 rather than mozilla-central.  The user-agent string would tell for sure; it's at the bottom of Help -> About (or, rather, the German equivalent).
Oh, okay, my fault... You are of course right, sorry.
I got the right one now. (from http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-central-l10n/)

The problem is indeed gone! (As well as another problem I noticed, with png background images destroying Flash movies in the foreground.) Great!
Awesome, just curious, when will it actually be implemented/released in a normal update?
No, this will be fixed in the next major release, which is Firefox4.0, I guess.
Please mark bugs fixed when they're fixed.
Assignee: nobody → roc
Status: UNCONFIRMED → RESOLVED
Closed: 15 years ago
Resolution: --- → FIXED

(In reply to Scott Bradford from comment #1)

Correction: setting to overflow: hidden does not actually seem to fix it,
but setting to overflow: auto (which is behaving the same as hidden) does.

I'm baffled.

Can confirm this bug is still happening with a position: fixed image. And can confirm setting overflow: auto (I set it on the containing div) seemed to strangely fix the issue.

You need to log in before you can comment on or make changes to this bug.