Blurry content on css animation on Chrome

Question

Here are the css properties for the .grow class in Tachyons CSS.

.grow {
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.25s ease-out;
}

It seems to follow the best practices for properly zooming on hover.

The zooming animation looks fine in firefox and Safari, but will look horribly blurry on chrome.

Any idea how to fix this ?