如何在Chrome中避免CSS变换元素的边缘抗锯齿效果

当使用以下代码实现绝对定位元素居中时：

left: 50%;
top: 50%; 
transform: translate(-50%, -50%);

若元素高度为奇数，Chrome会对元素边缘应用抗锯齿效果，导致边缘呈现半透明状态（如示例中的块“B”），而Flex布局居中的元素（块“A”）及Firefox浏览器中无此问题。

解决方案 #

1. 禁用变换抗锯齿

通过触发GPU加速属性，关闭Chrome的不必要抗锯齿效果。给绝对定位元素添加以下任意一个属性：

.b {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
  backface-visibility: hidden; /* 方案一 */
  /* 或 transform-style: preserve-3d; 方案二 */
}

2. 改用无transform的居中方法

避免因transform计算半像素偏移导致的抗锯齿，可选择以下替代方案：

方案A：margin:auto实现绝对定位居中

.b {
  position: absolute;
  left: 25%; /* 对应原示例中75%的水平位置 */
  right: auto;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 50px;
  height: 37px;
  background-color: red;
}

方案B：calc直接计算定位位置

直接通过calc计算元素的左上角位置，代替transform偏移：

.b {
  position: absolute;
  width: 50px;
  height: 37px;
  background-color: red;
  left: calc(75% - 25px); /* 容器75%位置减去元素宽度的一半 */
  top: calc(50% - 18.5px); /* 容器50%位置减去元素高度的一半 */
}

内容的提问来源于stack exchange，提问作者Sergey Shevchenko