使用 translateY 实现老虎机数字滚动动画后基线对齐问题求助

核心原因 #

• 安卓与Mac的字体渲染引擎存在差异，即便固定height和line-height，字符基线的计算逻辑仍有区别
• translateY的精度解析在不同设备上不一致，导致数字偏移基线

可行解决方案 #

1. 用绝对定位替代translateY（稳定性最高） #

将数字容器设为绝对定位，通过调整top值实现滚动，彻底规避字体渲染对位移的影响：

.slot-digit {
  position: absolute;
  top: 0;
  transition: top 0.3s ease;
  /* 保留原有字体、尺寸设置 */
  font-size: 16px;
  height: 19px;
  line-height: 19px;
}

/* 滚动时偏移一个数字的高度 */
.slot-digit.scroll {
  top: -19px;
}

2. 字体渲染校准 #

统一使用跨平台无衬线字体，添加字体加载优化，再微调内边距修正基线：

.slot-digit {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-display: swap;
  /* 根据实际测试调整正负值，适配安卓设备基线 */
  padding-top: 1px;
}

3. 父容器用flex强制基线对齐 #

给数字的父容器设置flex布局，强制子元素对齐基线：

.slot-container {
  display: inline-flex;
  align-items: baseline;
  height: 19px;
  overflow: hidden;
}

4. 改用精确像素值的translateY #

如果坚持使用translateY，放弃百分比偏移，用精确像素值减少解析差异：

.slot-digit {
  transform: translateY(-19px);
  /* 替代 translateY(-100%) 这类百分比写法 */
}

验证建议 #

• 优先测试绝对定位方案，它脱离文档流，受字体渲染影响最小
• 用Galaxy S10+的浏览器开发者工具实时调整top或padding值，快速找到适配的偏移量

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