Question

我遇到了这个非常烦人的问题。

使用变换对齐图像时，基于它的平移百分比会导致图像略微模糊。这仅适用于百分比对齐

考虑一下这个css：

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

尝试过的解决方案：

translate3d fix
透视修复
translateZ fix

也许有人有解决方案？

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

示例图片：

谢谢！

Answer 1

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

Answer 2

在Transform中使用百分比值：translate意味着它以亚像素精度定位元素。在控制台中查询时，您可以在jsfiddle中看到第二个div的像素值偏移量：

这意味着您的浏览器不得不做一些不太理想的抗锯齿来定位您的图像，这是导致模糊的原因。如果您可以将其定位为整像素值，则图像将保持清晰。

我还没有找到解决这个烦人问题的优雅解决方案，但是使用javascript（抱歉，我知道这被标记为css问题）可以想象你可以测量元素的偏移量值，然后删除平移并测量非平移的像素偏移值，然后计算两个偏移之间的差异（翻译前和翻译后的偏移差异）。然后，不是将translate（％，％）放回到元素上，而是可以将计算的差异四舍五入到最接近的整像素值（即：删除子像素渲染），然后将这些值重新应用为translate（px，px）。这样可以保持图像清晰。这不是最佳解决方案，但它是迄今为止我能够提出的最佳解决方案。

编辑：

这是我编写的一个快速功能，可以完成我上面所说的内容。我再次道歉，这不是一个CSS解决方案，但我认为无法用CSS修复它。这也不是一个很好的解决方案，因为你失去了％值的响应能力，它也会覆盖任何不能翻译X或翻译的变换属性（所以如果这是一个问题，可以使用包装div）。有人可能通过使用Transform矩阵来解决这个问题，但是是啊......

[编辑2：更新的功能，以解释可能分配给元素的任何css转换]

＆＃13;

function snapTranslateXYValsToNearestPixel(element){
  var xTransPos = $(element).offset().left;
  var yTransPos = $(element).offset().top;
  // turn off any transitions (but save values first):
  var transitionVal = $(element).css('transition');
  $(element).css('transition', 'none');
  // turn off translate:
  $(element).css('transform', 'translateX(0) translateY(0)');
  var xPosDiff = xTransPos - $(element).offset().left;
  var yPosDiff = yTransPos - $(element).offset().top;
  var xPixelVal = Math.round(xPosDiff);
  var yPixelVal = Math.round(yPosDiff);
  var translateVal = 'translateX(' + xPixelVal + 'px) translateY(' + yPixelVal + 'px)';
  $(element).css('transform', translateVal);
  // reapply transition value (wait one tick for new css value to apply first):
  setTimeout(function() {
    $(element).css('transition', transitionVal);
  }, 1);
}

＆＃13;

同样，不是一个完全理想的解决方案......但是它会将你的元素的translateX和translateY百分比转换为整个像素值，它会给你一个漂亮的清晰图像。

使用示例：

snapTranslateXYValsToNearestPixel('.align-per');

Answer 3

我在此处找到了此修复程序：CSS: transform: translate(-50%, -50%) makes texts blurry

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

我认为值得为其他浏览器进行调查。

Answer 4

我只是遇到了覆盖层的问题，它通过CSS移动到窗口的中间，内容决定了高度和宽度。叠加层还具有最大高度和宽度。此外，我在叠加上获得了一些CSS转换，我不想丢失。

此处描述的所有CSS修复都不起作用。

我通过使用JavaScript来确保叠加始终可以被2整除，从而消除了模糊。我在创建叠加层时调用此函数，以及调整窗口大小时。

理论上，叠加层没有JS工作 - 但是JS使用起来更加清晰。并且它不需要任何超时来保持转换工作。

 ds
  .writeStream
  .outputMode(OutputMode.Append()) // only append mode is currently supported
  .format("es")
  .option("checkpointLocation", "/my/checkpointLocation")
  .option("es.mapping.id", "MY_OPTIONAL_ID_ATTRIBUTE")
  .trigger(Trigger.ProcessingTime(5, TimeUnit.SECONDS))
  .start("index/type")

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

4 个答案: