title: Parts of content remain visible despite overflow:hidden
body: <p>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. </p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/L0sqJ.jpg" alt="enter image description here"></p>
  
  <p>Has anyone else come accross this? I'm kind of stuck on this...</p>
  
  <p><strong>UPDATE:</strong> I made a <a href="http://jsfiddle.net/raduluchian/Nt5bN/7/" rel="nofollow noreferrer">jsfiddle</a> with the issue and realised it's only occuring on webkit based browsers (Chrome and Safari). I still have no idea why, though...</p>
  
  <pre><code>&lt;div class="list-name"&gt;
      &lt;ul&gt;
          &lt;li class="truncated"&gt;
              &lt;a href=""&gt;
                  Hover me to see all the magic thext I'm hidding
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>