pixel con overflow: nascosto e trasformazione: translate

Question

Ho una casella con didascalia, che è position: absolute e nascosta con top: 100%. Il genitore della didascalia ha overflow: hidden. Quando passo il mouse sulla casella, la didascalia scorre in modo da renderla completamente visibile.

Il problema ora è che durante questa transizione, c'è un bug di pixel. Ciò significa che la didascalia durante la transizione è 1 pixel meno largo della casella genitore. Dopo la transizione tutto sembra a posto.

Appare in IE 11 su Windows 8.1 e nei browser Webkit su Mac 10.11.2.

Si dovrebbe vedere questo effetto in this fiddle. Quando non vedi il bug dei pixel, prova a ridimensionare la finestra.

Si vede anche l'errore sullo screenshot.

ho già provato a:

• Impostare la didascalia 1 pixel più ampio
• Aggiungi overflow-x: hidden
• Aggiungi translate3d

Answer 1

darò una prova utilizzando una di queste opzioni:

posizione: relativa;

-webkit-transform: translateZ (0px);

-webkit-font-smoothing: subpixel-antialiased; o webkit-font-smoothing: antialiased

Answer 2

Ho riscontrato questo errore prima. il pixel bug è causato dalla trasformazione: translate.

provare questo sull'elemento padre.

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

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

transform-style: preserve-3d;