views:

867

answers:

1

Hey,

Found an annoying bug today which crashed chrome and safari (so all webkit browsers?) with just CSS.

It's a hover menu, hovering over an element then displaying the next dropdown level. Works perfectly in all other browsers.

See here, top left 'rn': http://test.davebowker.com/rn-hover/

Hope someone has some thoughts, or knows a little more about webkit than I do. I'm sure it's css, as I've disabled all javascript, and also ran the dropdown in a fresh page all on its own. I also know it's the hover + display:block that is causing it. - Just not sure how to fix it. Maybe someone else has run into this bug?

Cheers, Dave

EDIT: Included change made by Emily below. http://test.davebowker.com/rn-hover-fix/

+1  A: 

Change

.ukn-network-jumper strong:hover + ul,
.ukn-network-jumper ul:hover {
    display:block;
}

to

.ukn-network-jumper strong:hover + ul,
.ukn-network-jumper:hover ul {
    display:block;
}

You don't want to display the ul when you are hovering the ul but when you are hovering the parent div.

Emily
Weird. You'd think hovering over something with display would keep it there until you mouseOut -- and it does in everything but webkit.Your fix works, but has a drawback. The active parent area is now increased to the width of the widest child element. (Updated demo for those interested.) Meaning the mouseout hit area is much bigger, possibly spanning over the top of any navigation elements it were to sit next to, causing them to be unclickable until the mouse is fully out of the parent.Anyway -- I'll take it. Much better than having it crash. Hope they fix it though. Thanks Emily. :)
davebowker