Chromium浏览器AJAX调用后滚动时字体模糊问题求助

• 触发场景：执行Ajax函数后手动滚动至页面顶部时出现该问题
• 关键细节：涉事Ajax仅修改页面下方某div的内容，未对受影响文本（如标题）做任何改动
• 已排除情况：CSS与HTML标记无变化，常规硬件加速类修复方案无效

可行修复方案 #

1. 强制触发元素重绘 #

在Ajax完成且滚动后，通过临时修改元素样式触发浏览器重绘，解决渲染异常：

// 以标题元素为例，替换为实际选择器
const targetHeading = document.querySelector('h1');
// 临时隐藏再显示，触发重绘
targetHeading.style.display = 'none';
targetHeading.offsetHeight; // 强制浏览器计算布局
targetHeading.style.display = '';

2. 调整滚动与重绘的时机 #

避免Ajax完成后立即滚动，或在平滑滚动结束后触发重绘：

// 示例Ajax流程
fetch('/api/your-data')
  .then(res => res.json())
  .then(data => {
    // 更新目标div内容
    document.getElementById('bottom-div').innerHTML = data.content;
    // 平滑滚动到顶部
    window.scrollTo({ top: 0, behavior: 'smooth' });
    // 滚动结束后触发重绘，可根据实际调整延迟时间
    setTimeout(() => {
      document.querySelector('h1').offsetHeight;
    }, 300);
  });

3. 针对元素调整渲染属性 #

给受影响元素设置特定CSS属性，修正渲染行为：

/* 以标题为例 */
h1 {
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
  transform: translateZ(0); /* 若无效可尝试改为 transform: none; */
}

4. 修正元素像素位置 #

Ajax更新可能导致布局偏移，滚动后元素处于非整数像素位置，可强制调整：

window.addEventListener('scroll', () => {
  if (window.scrollY === 0) {
    const heading = document.querySelector('h1');
    const rect = heading.getBoundingClientRect();
    // 强制元素对齐整数像素
    heading.style.transform = `translateY(${Math.round(rect.top)}px)`;
  }
});

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