CSS翻译与百分比导致模糊图像

当您将图像与变形对齐时，基于百分比进行翻译会导致图像稍微模糊。这仅仅是与个对准

考虑这个CSS：

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

尝试的解决方案：

translate3d修复
角度解决
translateZ修复

也许有人有解决方案？

Updated: Js Fiddle 我更新了图像的js小提琴，以更好地看到差异。这在摄影中非常明显。

示例图片：

谢谢！

来源

2017-03-08 rhfhgfgh

你弄清楚这一个？ – user4584963

@ user4584963不幸的是没有。我现在知道它的视网膜（或另一个高分辨率）屏幕的具体问题。这导致它被忽略，我认为，并非所有用户都能看到差异，因为分辨率较低。你也看到这个问题吗？ – rhfhgfgh

雅并不总是模糊不清，但我可以看到，当我改变浏览器窗口的宽度和/或高度时，模糊来来去去。 – user4584963

我发现这个补丁在这里：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); 
}

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

来源

2017-03-08 11:08:53 317

@ 371感谢您的留言。不幸的是'-webkit-transform：translateZ（0）scale（1.0,1.0）;'重置了变换值。如果将其调整为： '-webkit-transform：translateZ（0）translate（1％，1％）;' 您将看到图像保持模糊。 – rhfhgfgh

对不起，我不知道它是否模糊，我看不到它，或者它不再模糊。你能否证实在这张照片中，第一张没有模糊，其他两张是？ http://i.imgur.com/E4pypZD.png – 317

我可以确认中间的一个更模糊。我知道这是非常昂贵的，但摄影非常引人注目。 – rhfhgfgh

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

这意味着，您的浏览器是被迫做一些达不到最佳抗锯齿位置你的形象，这就是造成模糊的原因。如果您可以将其定位到整像素值，则图像将保持清晰。

我还没有找到一个优雅的解决方案，这个恼人的问题，但与JavaScript（对不起，我知道这被标记为一个CSS问题）可以想象，你可以测量元素的偏移值，然后删除翻译和测量非平移像素偏移值，然后计算两个偏移之间的差异（前后平移之间的偏移差异）。然后，不要将翻译（％，％）放回到元素上，您可以将计算出的差异舍入到最接近的整像素值（即：删除子像素渲染），然后将这些值重新应用为translate（px，px）。这将保持你的形象鲜明。这是一个不太理想的解决方案，但这是迄今为止我所能达到的最佳解决方案。

编辑：

这里有一个快速功能我写的，会做什么，我说什么上面。再次，我很抱歉，这不是一个CSS解决方案，但我看不到用CSS修复它。这也不是一个很好的解决方案，因为你失去了％值的响应能力，它也会覆盖任何不是translateX或translateY的Transform属性（所以如果这是个问题，也许使用wrapper div）。有人可能会通过变换矩阵这样做可能解决这个问题，但是，是...

[编辑2：更新功能，以考虑可能被分配到元素的任何CSS转换]

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); 
 
}

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

用法示例：

snapTranslateXYValsToNearestPixel('.align-per');

来源

2017-05-24 20:36:52 RATKNUKKL

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

来源

2017-09-08 12:52:05

CSS翻译与百分比导致模糊图像

回答

相关问题