Image and text blur after transform: scale(1.5)?

Question

css

img{
  transform: scale(1.5);
}
img:hover .my_div{
font-smoothing: antialiased !important;
    -webkit-font-smoothing: antialiased !important;
}
img{
    filter: none;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0) scale(1.0, 1.0) translate3d(0,0,0); /* Chrome, Safari, Opera */
    transform: translateZ(0) translate3d(0,0,0);
    -webkit-font-smoothing: subpixel-antialiased;
}

There is also a block with text that has opacity: 1 when the hover effect, it is also blurred by about 1px, and yet, everything is blurred during the transition, while the picture gets larger, I also think this can be somehow removed.
Why is it still blurry?

Answer 1

As already mentioned, adjust the transformation so that the new size is integer. And font-smoothing should seem to remove text blur as a result. But the blur during the transformation will not be affected in any way. This implementation of the functionality of a particular browser does not depend on the layout designer.