css 中的变换是否会由于评估为半像素而导致模糊？答案

【问题标题】：Will transforms in css cause blurring due to evaluating to half pixels?css 中的变换是否会由于评估为半像素而导致模糊？
【发布时间】：2015-07-17 17:18:54
【问题描述】：

假设您使用此代码将元素垂直居中

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

（这个问题不是关于对齐的东西，所以请不要对对齐提出建议）

这会导致您的元素变得模糊吗？

This article 提到使用 translate 可以将元素定位在半像素值，从而在某些浏览器上造成模糊。浏览器是否仍然这样做，或者它们是否已被修补以不模糊？如果您使用百分比作为参数进行翻译，百分比是否可以计算为非整数像素值（从而允许模糊的可能性），还是四舍五入？ EX：如果你使用 66%，这会导致小数像素值吗？ This article 声称您可以在元素的父级上设置 transform-style: preserve-3d; 以避免模糊，但 cmets 中有人声称它对他不起作用.. 它真的起作用吗？

【问题讨论】：

浏览器只是这里等式的一部分。进行转换时，设备通常会硬件加速（缓存）元素。以我的经验，这是造成这个模糊问题的最大原因。我什至遇到过某个设备在硬件加速时实际上会降低采样率。

标签： css css-transforms blurry subpixel

【解决方案1】：

是的，浏览器仍然会这样做。在 Chrome 版本 61.0.3163.100 上遇到此问题

transform-style: preserve-3d; 也没有解决这个问题。

改为使用 flexbox with 来使项目居中。

.child-not-blurred {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

【讨论】：

【解决方案2】：

一种解决方案（不是最好的解决方案）是设置 Blur: 0。但也有一些边缘情况。

【讨论】：

在 Chrome 中，这是：-webkit-filter: blur(0px);