css - 变换时舍入 CSS 子像素

Question

所以，这个问题以前出现过，就像这里:Translate + Canvas = Blurry Text在这里:Is it possible to "snap to pixel" after a CSS translate?

这些链接或我读过的任何其他文章似乎都没有任何结论。一些响应者认为它不够重要，不需要关心，所以这就是为什么在我的情况下它是: Chrome 41.0.2272.104 中的屏幕截图

Safari 8.0.4 (10600.4.10.7) 中的屏幕截图

在 Safari 中详细查看损失？ (看看航天飞机图像中的结构，或第三张图像中岩石的细节)

这些家伙的 CSS 是

width: 100%;
height: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);

因此，在某些情况下——translateY 将以半像素结束。左边的第一张图片以这样的变换矩阵结束:

-webkit-transform: matrix(1, 0, 0, 1, 0, -56.5);

目前，chrome 似乎可以很好地呈现这个问题(我看到一些人说不同的浏览器在不同的版本中会产生这个问题)，但目前 Safari 有这个问题。因此，我解决此问题的假设是确保只有完整的像素，我已经通过计算并在 javascript 中应用转换来完成，但是在运行大量图像时这会花费更多的性能时间.

我尝试了一些纯 CSS 的 hack，比如使用 scale3d，但没有成功。如果有人有任何无 JS 的解决方案，我将非常感谢分享知识。

Answer 1

在某些浏览器中，您可以利用 calc 中的浮点舍入误差将您的数字舍入到所需的最接近的增量:

calc((2.55px * 5e-324) / 5e-324)

应使 2.55 像素四舍五入为 3 像素。支持的浏览器有Chrome(包括Brave、Electron、Edge、Opera等衍生产品)，不支持的浏览器有IE、Firefox、Safari(包括Midori等衍生产品)。值得庆幸的是，不支持的浏览器 IE、Firefox 和 Safari 只是将 calc 视为无效的属性值，因为使用的数字超出了可接受的范围。因此，要利用它，只需使用下面的示例来生成满足您需要的 CSS。是的，我知道这个生成器并不总是组合相似项，是的，这是有原因的:组合这些相似项会产生无法存储的数字。

var unit = document.getElementById('unit'),
  precision = document.getElementById('precision'),
  property = document.getElementById('prop'),
  output = document.getElementById('output');

function formatProp(x) {
  return (property.value.indexOf('%s') ?
      property.value.replace(/%s/g, x) :
      proprty.value + x).replace(/\\n/g, '\n')
    .replace(/\\t/g, '\t').replace(/\\r/g, '\r');
}
(unit.oninput = precision.oninput = property.oninput = function() {
  var Val = parseFloat(precision.value),
    V1 = "5e-324",
    V2 = "5e-324";
  if (Val < 1)
    V1 = V2 = '' + 5e-324 / Val;
  else if (Val > 1)
    V2 += ' * ' + Val, V1 += ' / ' + Val;

  output.textContent = formatProp(unit.value) + ';       /* for IE and FF*/\n' + formatProp('calc((' + unit.value + ' * ' + V1 + ') / ' + V2 + ')') + ';';
})();

CSS Unit: <input type="text" id="unit" value="-50%" style="width:14em" /><br /> Property : <input type="text" id="prop" value="-webkit-transform: translateY(%s);\ntransform: translateY(%s)" style="width:40em" /><br /> Round to: <input type="number" id="precision"
  value="1" style="width:14em" /> pixels (can be decimal)<b5 />
<pre id="output" style="background:#eee"> </pre>

请注意，根据实时响应的语言定义，是的，您可以在上面的演示中输入您自己的值，是的，将实时生成相应的 CSS。

我创建的测试页面:purposeful-rounding-errors browser support test

请注意，虽然上面的图表目前支持浏览器，但它很可能会发生变化，因为使用舍入误差有点不标准:W3C 规范仅在 float 的定义中暗示它们，但确实从未明确声明浏览器需要实现次正规浮点符号或舍入错误。