Using Transform: Scale Results in Blurry Images

How to fix blurry Image on transform scale

Try this, it's work fine for me!

img {
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

Using transform: scale results in blurry images

it works if you reset the blur filter in safari:

-webkit-filter: blur(0px); 

example for all browsers:

filter: none; 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px); 
-ms-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

hope it helps

transform scaleing down makes image blurry

Add the following CSS to your img element (Not a safe hack cross-browser-wise):

img {
   image-rendering: -moz-crisp-edges; /* Firefox */
   image-rendering: -o-crisp-edges; /* Opera */
   image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
   image-rendering: crisp-edges;
   -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

Snippet below:

.container {

  transform: scale(.95);

  transition: transform 70ms ease-in;

  float: left;

}

.container:hover {

  transform: scale(1);

}

img {

  image-rendering: -moz-crisp-edges; /* Firefox */

  image-rendering: -o-crisp-edges; /* Opera */

  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */

  image-rendering: crisp-edges;

  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */

}

<div class="container">

  <img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />

</div>

<div class="container">

  <img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />

</div>

Preventing blurry rendering with transform: scale

It is to do with the default transform-origin on the scaled elements. It defaults to 50% 50% for any element being transformed, but this has issues when scaling down 1px values as it has to centre the scale on a half pixel and the rendering of the elements has issues from here on out. You can see it working here with the transform-origin moved to the relevant extremes for each item.

A bit of playing about shows that this same blurring happens on scaled elements for any dimension where the scaling ends up halving a pixel.

body {

    padding: 1em;

}

.container {

    width: 200px;

    height: 200px;

    margin: 100px;

    background-color: #EEE;

    position: absolute;

    transform: scale(2);

}

.outline {

    position: absolute;

    background: #1899ef;

    z-index: 999999;

    opacity: 1 !important;

}

.outlineBottom, .outlineTop {

    width: 100%;

    height: 1px;

    transform: scale(1, 0.5);

}

.outlineBottom {

    bottom: 0;

    transform-origin: 0 100%;

}

.outlineTop {

    transform-origin: 0 0;

}

.outlineLeft, .outlineRight {

    height: 100%;

    width: 1px;

    transform: scale(.5,1);

}

.outlineRight {

    right: 0px;

    transform-origin: 100% 0;

}

.outlineLeft {

    left: 0px;

    transform-origin: 0 0;

}

<div class="container">

    <div class="outline outlineTop"></div>

    <div class="outline outlineRight"></div>

    <div class="outline outlineBottom"></div>

    <div class="outline outlineLeft"></div>

</div>

CSS transition effect makes image blurry / moves image 1px, in Chrome?

2020 update

• If you have issues with blurry images, be sure to check answers from below as well, especially the image-rendering CSS property.
• For best practice accessibility and SEO wise you could replace the background image with an <img> tag using object-fit CSS property.

---

Original answer

Try this in your CSS:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

What this does is it makes the division to behave "more 2D".

• Backface is drawn as a default to allow flipping things with rotate
  and such. There's no need to that if you only move left, right, up, down, scale or rotate (counter-)clockwise.
• Translate Z-axis to always have a zero value.
• Chrome now handles backface-visibility and transform without the -webkit- prefix. I currently don't know how this affects other browsers rendering (FF, IE), so use the non-prefixed versions with caution.

---

Related Topics