鼠标悬停按钮触发transition时其他按钮字重闪烁问题求助

问题描述：当鼠标悬停在某个按钮上时，其余所有按钮的字重会短暂闪烁。尝试设置字体大小与字重、移除:active伪类选择器、使用:after伪元素等方法均无法解决。

问题原因 #

闪烁是因为transform: scale导致按钮尺寸变化时，浏览器重新计算布局，触发了字体渲染的微小调整——尤其是浏览器对元素尺寸变化敏感、或字体未完全预加载时，容易出现这类抖动。

修复方案 #

方案一：开启硬件加速

给按钮添加transform: translateZ(0)，让GPU处理变换操作，避免浏览器重排重绘带来的字体抖动：

修改后的完整CSS：

body {
  text-align: center;
  background-color: #131313;
  font-family: Arial;
  color: white;
}

.buttons {
  margin: 5px 5px;
  padding: 10px 100px;
  position: relative;
  border: 2px solid rgb(255, 0, 242);
  border-radius: 10px;
  background: #ffffff00;
  color: rgb(255, 0, 242);
  font-size: 16px;
  cursor: pointer;
  font-weight: normal;
  transform: translateZ(0); /* 开启硬件加速 */
}

.buttons:hover {
  transform: scale(0.95);
  transition: transform 200ms, color 200ms, border-color 200ms; /* 明确过渡属性，避免影响无关样式 */
  color: rgb(255, 134, 249);
  border-color: rgb(75, 40, 202);
}

.buttons:active {
  transform: scale(0.9);
  transition: transform 100ms, color 100ms, border-color 100ms; /* 明确过渡属性 */
  color: rgb(255, 78, 175);
  border-color: rgb(75, 40, 202);
}

方案二：固定按钮宽高

给按钮设置固定宽高，确保scale仅做视觉缩放，不改变元素布局空间，避免浏览器重新计算布局：

修改后的.buttons样式：

.buttons {
  margin: 5px 5px;
  padding: 10px 100px;
  position: relative;
  border: 2px solid rgb(255, 0, 242);
  border-radius: 10px;
  background: #ffffff00;
  color: rgb(255, 0, 242);
  font-size: 16px;
  cursor: pointer;
  font-weight: normal;
  width: 220px; /* 固定宽度，包含padding和border */
  height: 44px; /* 固定高度 */
  box-sizing: border-box; /* 确保padding和border计入宽高 */
}

原理说明 #

• 硬件加速将变换操作转移到GPU，避免触发浏览器的重排（reflow）和重绘（repaint），从根源上消除字体渲染的抖动。
• 固定宽高后，元素的布局空间不再随scale变化，浏览器无需重新计算其他元素位置，自然不会引发字体的意外渲染调整。

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