基于Google指南的展开/收起动画文本渲染异常问题求助

针对你遇到的跨浏览器、跨DPI屏幕的文本模糊、不流畅、变粗问题，核心思路是让文本在动画全程保持固定布局，仅通过容器的裁剪或GPU变换实现展开收起，避免文本在动画帧中反复重排重绘，以下是具体实现方案：

1. 分离动画容器与文本容器 #

将动画逻辑与文本布局完全分离，动画仅作用于外层容器，内部文本容器始终处于正确的布局位置：

/* 外层动画容器，仅做scaleY变换 */
.expand-wrapper {
  transform-origin: top center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scaleY(0);
  /* 避免动画期间文本被拉伸模糊 */
  transform-style: preserve-3d;
}
.expand-wrapper.open {
  transform: scaleY(1);
}

/* 内部文本容器，固定布局，仅负责裁剪 */
.content-container {
  overflow: hidden;
  height: auto;
  /* 提前锁定文本渲染规则 */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

这种方式下，动画仅通过GPU执行scale变换，文本容器的布局从未改变，浏览器无需在动画帧中重新计算文本渲染。

2. 修复Firefox文本变粗/闪变问题 #

Firefox在GPU动画结束后，会出现GPU渲染与CPU渲染的字体抗锯齿不一致问题，可在动画结束后强制触发一次重排，让文本回到CPU原生渲染：

const wrapper = document.querySelector('.expand-wrapper');
wrapper.addEventListener('transitionend', () => {
  // 临时触发GPU变换再重置，强制浏览器重绘文本
  const content = document.querySelector('.content-container');
  content.style.transform = 'translateZ(0)';
  void content.offsetHeight; // 强制触发重排
  content.style.transform = '';
});

3. 低DPI屏幕Chrome模糊修复 #

低DPI屏幕下，GPU变换可能导致文本像素对齐异常，可在动画结束后移除GPU变换，回到原生布局：

wrapper.addEventListener('transitionend', () => {
  // 移除scale变换，让容器回到正常布局流
  wrapper.style.transform = 'none';
  // 确保容器高度为整数像素，避免亚像素渲染模糊
  const height = wrapper.offsetHeight;
  wrapper.style.height = `${Math.round(height)}px`;
});

4. 对齐Google「People also ask」的实现逻辑 #

Google的实现核心是文本容器始终处于最终布局位置，仅通过上层容器的max-height裁剪实现动画，这种方式完全避免了文本的布局变动：

.expander {
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.expander.open {
  max-height: var(--content-max-height); /* 提前计算好内容的最大高度 */
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

这里的.content是绝对定位，从一开始就处于正确的布局位置，动画仅改变上层容器的裁剪范围，文本渲染全程稳定。

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