Search code examples
cssoverflowbrowser-refresh

Parts of content remain visible despite overflow:hidden

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.

enter image description here

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>
Solution

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