Chrome浏览器使用CSS scale与transform实现缩放效果时出现多余线条

问题根因 #

你遇到的灰色线条是CSS transform: scale() 变换过程中非常典型的亚像素渲染缝隙问题：浏览器在计算缩放后的元素坐标时，会产生非整数像素的位置偏移，此时<a>标签内部相邻<div>的边缘会出现极细的半透明缝隙，透出<a>标签或者下层容器的灰色背景，视觉上就表现为多余的灰色线条。

修复方案 #

你可以通过以下几处CSS调整解决问题，无需修改HTML结构：

• 给<a>标签添加overflow: hidden，裁剪掉缩放过程中元素边缘溢出的半透明像素，避免透出下层背景
• 统一<a>标签和内部<div>的背景色，就算存在微小缝隙，透出的颜色和内部元素一致，视觉上不会出现异常线条
• 给<a>标签添加vertical-align: top，解决行内块元素默认基线对齐预留的底部空隙，避免非悬浮状态也可能出现的缝隙
• 可选给内部<div>添加transform: translateZ(0)触发GPU渲染，优化transform动画的像素计算精度，进一步降低缝隙出现概率

核心代码示例 #

/* 你的原a标签样式基础上新增属性 */
a {
  display: inline-block;
  transition: transform 0.3s ease;
  /* 新增修复属性 */
  overflow: hidden;
  background-color: #ffffff; /* 和内部div的背景色保持一致即可 */
  vertical-align: top;
}

a:hover {
  transform: scale(1.05);
}

/* 内部div可选添加 */
a > div {
  transform: translateZ(0);
}

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