Moving navigation solved

04 May 2006

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:

Progressive screenshots showing navigation problem in Safari

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.

Recent Posts

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

iPad Pro Pencil loop

11 Oct 2017

Troika #32: Tearjerker

04 Oct 2017

Instagram Hickstagram

  • 25 Apr 2018

    Haven’t done a sunset in a while, and tonight’s was too good to ignore

  • 23 Apr 2018

    Your birthday pavlova awaits you @hicksleigh!

  • 23 Apr 2018

    A very Happy Birthday to my lovely wife Leigh! We’re keeping the age a secret a though…

  • 18 Apr 2018

    Kind of them to notice!

  • 18 Apr 2018

    A very Happy 20th Anniversary to @hicksleigh! I love you more than ever wifey, and still thank my lucky stars that we met. 😘😍

  • 16 Apr 2018

    If anyone’s interested in buying a nice carbon road bike, I’m selling my Colnago 😉 https://www.ebay.co.uk/itm/Colnago-CLX-3-0-2012-carbon-road-bike-size-54/302705911235

  • 15 Apr 2018

    So pretty!

  • 13 Apr 2018

    Tasty one this

  • 10 Apr 2018

    Replacing worn out MacBook keys. I obviously type ‘a’ a lot

  • 08 Apr 2018

    Grown up Fanta

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom