Safari, scriptaculous, and non-clickable links

For the better part of the last couple of days I’ve been trying to figure out why Safari was not allowing me to click on links. Aside from an annoyance, it’s not good to have clients complaining…

The non-clickable links were inside a Scriptaculous sortable div. So best guess was that it had something to do with that. Unfortunately my go-to tech support, Google, didn’t have much for me. And the biggest problem is that once I tried to click on one of the non-functioning links none of the previously working links would work either.

What I did come across is a whole stack of web pages talking about Safari and z-index issues, which got me digging. When you drag a Scriptaculous draggable the z-index goes to 1000 by default so that it is on top of everything else on page while dragging. After much digging and finally coming across this page I put in the z-index to 0 and it works without a hitch.

Sortable.create('menu_wrapper',
  {
  tag:'div', 
  zindex: 0
}); 

There’s more to the real code, but this is enough to get the point.