Css translate 50% on odd width/height blurring background image

user_7490684 0
Viewed 1154

I'm working on a a div which has odd width/height and I need to transform it 50%, this blurs out my background image. Is there a way to fix it?

I have tryed to:

  • scale(2) and zoom(.5), but this gives me an issue when i move the component.
  • backface-visibility: hidden; or -webkit-font-smoothing: subpixel-antialiased;, but this only fixes the text inside the div if it is blurry.
  • filter: blur(0)
  • Using tricks like perspective(1) or removing a single pixel from width/height would be a hack more than a solution.
<div class="my-div any-other-random-class"/>

// CSS
.myclass {
   transform: translate(50%, 50%);
}

.any-other-random-class{
   width: 123px;
   height: 111px;
}

I expect the background image not to be blurry, but it is blurry due to translate calculating a decimal value.

Edit: I have noticed this appening only on chrome.

blurry css-transforms css html
1 Answers

Try this, it worked for me. 

 transform: translateZ(0) translate(50%, 50%);
 backface-visibility: hidden;
 -webkit-filter: blur(0);
 filter: blur(0);
user_93804800
Related