One of the headaches I’ve had with the position: fixed
navigation on the journal pages is a bug that has reared its head in WebKit based browsers (Safari, Omniweb, NetNewswire etc).
OK, a little background. To avoid the IE flicker problem, my navigation’s rollover states are set as the background of a list item in a numbered list, and the ‘normal’ state is set as the background of the link. On hover the link background is set to none - revealing the rollover state below. With me so far?
When combined with position:fixed
, the nav had a strange effect when scrolling. As you scroll down, the background of the anchor tag scrolls with it, but not the background of the <li>
item:

This didn’t occur in Firefox or Opera (IE doesn’t support position:fixed
of course, so it gets position:absolute
instead), just in WebKit browsers. It’s a minor, but irritating problem.
The fix was not, as I thought it might be, applying background-attachment: fixed
, but just this:
#nav ol a { position: absolute; }
I’m posting it here in case anyone else has come across it too. A bug in WebKit? Trouble is, when you’re bending CSS to do thing it wasn’t designed to do (Image replacement and fixed positioning) it may not be.