I am using transform: translateX in order to be able to create a sliding effect.
The code works fine under Chrome.
In safari, in some screen resolutions and sometimes under firefox I get a small gap during the animation.
When the animated layer stops the gap dissapears.
Initially I have a
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
And after hover, I have a:
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
I have a makeup of my code here: https://jsfiddle.net/e197mrsb/40/
I would be grateful if someone could help.