Css перевод 50% на нечетное фоновое изображение размытия ширины / высоты

Question

Я работаю над div, который имеет нечетное width/height, и мне нужно преобразовать его на 50%, это размывает мое фоновое изображение.Есть ли способ исправить это?

Я пытался:

• scale(2) и zoom(.5), но это вызывает у меня проблему при перемещении компонента.
• backface-visibility: hidden; или -webkit-font-smoothing: subpixel-antialiased;, но это исправляет текст внутри div, только если он размытый.
• filter: blur(0)
• Использование трюков типа perspective(1) или удалениеодин пиксель из ширины / высоты будет взломать больше, чем решение.

<div class="my-div any-other-random-class"/>

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

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

Я ожидаю, что фоновое изображение не будет размытым, но оно размыто из-за translate вычисления десятичного значения.

Редактировать: я заметил это добавление только на хром.

Answer 1

Попробуйте, у меня это сработало.

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