WebKit内核下CSS文本样式异常问题求助

我开发了一个仿Spotify Wrapped的页面，通过JavaScript动态修改H2和H3标签的文本内容。桌面版Google Chrome中显示正常，但在iOS浏览器及macOS Safari（均为WebKit内核）中，文本切换后会出现未居中、部分内容超出屏幕的样式异常，仿佛文本对齐规则未正确更新。旋转手机屏幕或调整Safari窗口大小可临时修复问题，但切换到下一个文本段时异常会再次出现。

相关代码 #

const slide_data = {
  1: {
    text: "Example",
    sub: "This is an example text.",
    time: 10
  },
  2: {
    text: "Title for the Looooooooooong Example Section",
    sub: "This is an example text for this section to show my issue to StackOverflow.",
    time: 10
  },
  3: {
    text: "4",
    time: 10
  }
}

var slide_change = 1;
let currentSleep;
async function slides() {
  var header = document.querySelector('#header');
  var sub = document.querySelector('#subtitle');

  for (i = 1; i <= Object.keys(slide_data).length; i = i + slide_change) {
    var slide = slide_data[i]
    slide_change = 1
    main.style.fontSize = "4rem";
    main.style.color = "white";
    header.innerHTML = slide.text;

    if (slide.sub != null) {
      sub.innerHTML = slide.sub;
    } else {
      sub.innerHTML = ""
    }

    bar = document.querySelector(`#bar_${i}`);

    currentSleep = new Sleep();
    await currentSleep.start(slide.time * 1000, bar, bar.maxWidth)
  }
}

解决方法 #

这个问题源于WebKit内核在动态更新DOM内容后，未正确执行重排（reflow）和重绘（repaint）操作。以下是几种可行的修复方案：

• 强制触发重排：在更新文本后，读取元素的offsetHeight属性（这会强制浏览器重新计算布局）：

  // 设置header和sub的文本后添加
  void header.offsetHeight;
  void sub.offsetHeight;
  

• 用CSS触发硬件加速：给文本容器添加不影响布局的transform属性，优化WebKit的重绘逻辑：

  #header, #subtitle {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  

• 优先使用textContent更新文本：如果文本不含HTML内容，用textContent替代innerHTML，减少DOM操作复杂度：

  header.textContent = slide.text;
  sub.textContent = slide.sub || "";
  

• 显式触发重绘：通过短暂修改元素样式再恢复的方式强制浏览器重绘：

  function triggerRepaint(element) {
    element.style.display = 'none';
    void element.offsetHeight;
    element.style.display = '';
  }
  
  // 更新文本后调用
  triggerRepaint(header);
  triggerRepaint(sub);
  

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