css - css 中的转换是否会由于评估半像素而导致模糊？

Question

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

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

(虽然这个问题不是关于对齐的，所以请不要提出关于对齐的建议)

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

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

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