Parts of content remain visible despite overflow:hidden

Question

I have an issue regarding a div with overflow: hidden. It is positioned relative and it's child div is positioned absolute. On hover, the parent div changes from overflow:hidden to overflow:visible. This enables the child div to display properly.

The issue: although everything else works just great, when the mouse is no longer over the parent div (thus overflow is now hidden again), bits of the child div are still shown in their place. They are not actually displayed, because if I select some text or objects near them the dissapear completely. It's as if the page needs a "refresh" of some kind.

Has anyone else come accross this? I'm kind of stuck on this...

UPDATE: I made a jsfiddle with the issue and realised it's only occuring on webkit based browsers (Chrome and Safari). I still have no idea why, though...

<div class="list-name">
    <ul>
        <li class="truncated">
            <a href="">
                Hover me to see all the magic thext I'm hidding
            </a>
        </li>
    </ul>
</div>

Answer 1

It would seem that an extra overflow:hidden added to the hyperlink solves the issue. Check it out in this fiddle.

Answer 2

That looks like a bug in rendering, not why it works like that. Developer tools show it like mouse is still hovered above the element. Possibly there some element became to wide/high and mouse out event can't happen. But if you remove position:relative;, position:absolute; and replace top/left with margin-top/margin-left - everything works nice to me:

http://jsfiddle.net/Nt5bN/13/

CSS:

.list-name ul {
    margin: 50px;
    padding: 0;
    list-style: none;
}

.list-name li {
    display: block;
    float: left;
    width: 60px;
    height: 29px;   
    overflow: hidden;
    background: #eee;
}

.list-name a {
    width: 300px;
    display: block;
    float: left;
}

.list-name li.truncated:hover {
    overflow: visible;
}

.list-name li.truncated:hover a {

    margin-top: -3px;
    margin-left: -8px;
    background: #fff;
    z-index: 9999;
    padding: 2px 0 2px 7px;
    border-radius: 3px;
    border: 1px solid #ddd;
}