pixel error with overflow: hidden and transform: translate

Question

I have a box with a caption, which is position: absolute and hidden with top: 100%. The parent of the caption has overflow: hidden. When I hover the box, the caption slides up so it is fully visible.

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.

It appears in IE 11 on Windows 8.1 and in Webkit browsers on Mac 10.11.2.

You should see this effect in this fiddle. When you don't see the pixel bug, then try to resize the window.

You also see the error on the screenshot.

I have already tried to:

• Set the caption 1 pixel wider
• Add overflow-x: hidden
• Add translate3d

Answer 1

I encountered this error before. the pixel bug is caused by the transform:translate.

try this on the parent element.

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;