Currently there’s a pretty major Firefox bug in effect on this very page. Normally I wouldn’t post about something as insignificant as a browser bug, but I really don’t know of any for Firefox that aren’t related to printing, and I haven’t seen this documented before either. It involves position: fixed and the scrollbar: If there is an element with position: fixed set behind the scrollbar, you can no longer click and drag the scrollbar slider, or click on the scrollbar arrows. You can still use the mouse wheel to scroll inside the page, or use arrow keys, so scrolling isn’t completely shot, but this is still bad for usability.
To reproduce the bug: view this page using Firefox on a Mac, at a browser width of 1024, and try dragging the scrollbar slider. It shouldn’t go anywhere. However if the slider is below the fixed image I have running along the top of the page, you should be able to click and drag just fine.
This seems to be a Gecko bug, as both Firefox for Mac and Camino have this behavior, yet strangely enough the PC version of Firefox is unaffected. Goes to show you that you can’t trust Firefox to be perfect all the time…
4 Responses to “Strange Firefox bug with position: fixed”
Apr 24th, 2007
Steve, you’re going to think I’m crazy, but try this:
Set the z-index of the position:fixed element to -1.
Move the background tag in your body element to the html element.
Set the z-index of the body to 0.
Set the background-color of the body to transparent.
Set the position of the body to relative.
Cross your fingers. :P
Apr 25th, 2007
It works!!!! Thank you so much Mike, you crazy miracle worker you! So I take it the body must be the topmost element, and it must be relatively positioned for the scrollbar to work properly over it, then. That’s quite strange.
May 18th, 2007
I’ve noticed another “bug”, which appears to affect Firefox but not IE7, and I see it occurs on your page as well.
Basically, if you have a fixed div on your page, like your menu there on the left, or my “sidebar” on the right of my page (linked above), when you hover the mouse over that div and try to scroll the page, Firefox doesn’t scroll the page, IE7, however, does scroll the page (while the fixed div remains stationary as expected). Hovering the mouse off of fixed elements allows one to scroll the rest of the page as expected in both browsers, but IE7 seems to recognize that you want to scroll the scrollable parts of the page when you try using the scrollwheel over a fixed div, whereas Firefox does not.
If anyone has a solution for this that does not involve doing away with my fixed DIV, I’d appreciate the help… — Will
Feb 19th, 2008
I know the last comment was donkeys ago, but does anyone know of a fix for this? (firefox not scrolling when hovered over a fixed element) I’ve been searching for a solution to this for sooo long its driving me crazy?