This one pixel error was causing an unnerving issue with a web page and google failed to help me find the result. Once I knew what to search for, it seemed that a lot of folks were having this issue. Hope this snippet helps.Problem: Images or elements that have an opacity transition on them jump 1 pixel on hover if there is a transformation applied as well. This is true for 3d transform, rotate transform, as well as other types of transformations or animated properties.
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
Fix: add this “-webkit-backface-visibility:hidden;” to your class. The jump goes away and the effect is smooth and sweet.More info on the CSS backface-visibility propertySolution presented in stackoverflow