Adding transform to an image blurs it in Chrome

Asked May 05 '16 at 18:54

Active May 15 '19 at 06:34

Viewed 126 times

I have an image with a transform applied to it to :transform: translate(-50%,-50%);

Only in Chrome this causes the image to be blurry.

I've tried different proposed solutions such as setting translateZ(0); filter: blur(0) without any success.

Removing the transform property removes the blurry effect.

Here is the current css for the image : position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: auto; width: auto; max-height: 100%; max-width: 100%;

And it looks like this :

And here is the actual image returned from my image service :

Notice that the first image has blurred edges and the original image does not.

asked May 05 '16 at 18:54

imrank1

Did you try ditching the backface and doing a reset on your Z and scale? Like `-webkit-backface-visibility: hidden;-webkit-transform: translateZ(0) scale(1, 1);` ....oh and no need for height/width:auto unless you're overriding inheritance since those are the default values anyway for those properties. Sweet image by the way. – Chris W. May 05 '16 at 19:04
I did try that but no difference :( – imrank1 May 05 '16 at 19:18
You can post the code HTML/CSS? – Blazed May 05 '16 at 19:56
Did you figure this one out? – user4584963 Apr 20 '17 at 16:30
Check this: https://stackoverflow.com/a/56143014/2746447 – egor.xyz May 16 '19 at 08:11

Adding transform to an image blurs it in Chrome

0 Answers0