在变换上舍入CSS子像素

Question

所以,之前出现过这个问题,比如:翻译+ Canvas =模糊文本 ,这里:CSS翻译后是否可以"捕捉到像素"？

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

Safari 8.0.4中的屏幕截图(10600.4.10.7)

在Safari中查看详细信息？(看看航天飞机图像中的结构,或第3幅图像中岩石的细节)

这些家伙的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一样的黑客攻击,比如使用scale3d但没有成功.如果有人有任何JS免费解决方案,我将非常感谢共享的知识.

Answer 1

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

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

应导致 2.55px 向上舍入为 3px。支持的浏览器为 Chrome（包括 Brave、Electron、Edge 和 Opera 等衍生品），不支持的浏览器为 IE、Firefox 和 Safari（包括 Midori 等衍生品）。值得庆幸的是，不支持的浏览器（IE、Firefox 和 Safari）只是将 calc 视为无效属性值而忽略，因为使用的数字超出了可接受的范围。因此，要利用此功能，只需使用下面的示例来生成 CSS 以满足您的需求。是的，我知道这个生成器并不总是组合相似的术语，是的，这是有原因的：组合这些相似的术语会产生一个无法存储的数字。

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

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。

我创建的测试页面：有目的的舍入错误浏览器支持测试

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