CSS在奇数宽度/高度模糊的背景图像上转换50％

Question

I'm working on aa 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.

Answer 1

Try this, it worked for me.

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