CSS转换百分比会导致图像模糊

Question

我遇到过这个非常讨厌的问题.

将图像与变换对齐时,基于它的平移百分比会导致图像略微模糊.这只是百分比对齐

考虑一下这个css:

img {
  display: block;
  height: auto;
  max-width: 100%;
  transform: translate(1%,1%); 
}

尝试的解决方案:

1. translate3d修复
2. 透视修复
3. translateZ修复

也许有人有解决方案？

更新:Js Fiddle 我用图像更新了js小提琴,以便更好地看到差异.这在摄影中非常引人注目.

示例图片:

谢谢!

Answer 1

尝试这样的事情 translateX(calc(-50% + 0.5px))

Answer 2

我在这里找到了这个修复：CSS：transform：translate（-50％，-50％）使文本模糊

div.align-per {
  transform: translate(1%, 1%) translateZ(0) ;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

我认为其他浏览器值得研究。