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. Here’s how to go about patching the CSS transition effect bug fix:

.example { 
     -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

Questions? Let us know.