title: pixel error with overflow: hidden and transform: translate
body: <p>I have a box with a caption, which is <code>position: absolute</code> and hidden with <code>top: 100%</code>. The parent of the caption has <code>overflow: hidden</code>. When I hover the box, the caption slides up so it is fully visible. </p>
  
  <p>The problem now is that during this transition, there is a pixel bug. That means the caption during the transition is 1 pixel less wide then the parent box. After the transition everything looks good.</p>
  
  <p>It appears in IE 11 on Windows 8.1 and in Webkit browsers on Mac 10.11.2.</p>
  
  <p>You should see this effect in <a href="https://jsfiddle.net/u46t0L31/2/" rel="noreferrer">this fiddle</a>. 
  When you don't see the pixel bug, then try to resize the window.</p>
  
  <p>You also see the error on the screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/trbGU.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/trbGU.jpg" alt="enter image description here"></a></p>
  
  <p>I have already tried to:</p>
  
  <ul>
  <li>Set the caption 1 pixel wider</li>
  <li>Add <code>overflow-x: hidden</code></li>
  <li>Add <code>translate3d</code></li>
  </ul>