Image Shifting/Jumping After CSS Transition Effect with Scale Transform in Firefox

Strange Pixel Shifting / Jumping in Firefox with CSS Transitions

After some ardent research, this is a known issue with Firefox's sub-pixel rendering. More obvious demonstrations of the effect can be found here and here. The phenomenon is referred to as "pixel snapping" and it occurs rather frequently in Firefox's animation, particularly at the conclusion of a transition.

The solution, which is also proposed in the Bugzilla thread, is to add rotate(0.0001deg) to the scaling transform. This greatly reduces the effect but does not entirely eliminate it. However, it is the best I can hope for, so I'm accepting it as the answer.

Firefox transform scale image bug. Image flashes a small version of itself when using hover transform transition

I solved this by adding following. This fixes FF v45.0.1 bug which displayed the smaller image on hover with transition for me.

img {
image-rendering: optimizeQuality;
}

Related Topics