all articles

css transformation scale cause blurring

2015-08-01 @sunderls

css transfomration scale blurring chrome IE9 js

description, bug

if we add css transformation scale(0.8) to shrink a <div>, the text & image in it may well be blurry.

browsers

Chrome

code

.element {
      transform: 'scale(0.8)'
}

solution, use css filter to clear the blurring

.element {
     filter: blur(0)
}

please add vendor-prefix by yourself

IE9

but in IE9 blur(0) won't fix. Let's do something around.