React使用epubjs开发阅读器调整尺寸时文字位置偏移如何解决？

epubjs针对流式EPUB默认采用动态分页逻辑，调用rendition.resize()会触发内容重新流式排版。容器宽度从100%收缩到80%后，单页可容纳的文本量减少，原有分页位置全部偏移，再加上resize过程中渲染缓存未清空，就会出现上一页内容残留、错位的问题。
不存在能固定流式文档文字位置的API——流式EPUB的排版逻辑本身就是自适应容器尺寸的，只要容器尺寸变化，排版必然会调整。

方案1：清理缓存后重绘当前页（适配流式排版调整，解决残留问题） #

resize后先清除现有渲染缓存，再基于当前阅读的CFI位置重绘内容，完全消除上一页残留：

// 打开侧边栏调整宽度逻辑
rendition.resize("80%", "100%");
// 清空现有渲染内容
rendition.clear();
// 读取当前阅读位置，重绘时保留进度
const currentLoc = rendition.currentLocation();
if (currentLoc) {
  rendition.display(currentLoc.start.cfi);
}

初始化rendition时增加以下配置，减少resize后的排版误差：

const rendition = book.renderTo("reader-container", {
  width: "100%",
  height: "100%",
  flow: "paginated",
  spread: "none", // 关闭跨页渲染，避免单页宽度变化后跨页计算异常
  resizeOnOrientationChange: false // 禁用内置的resize监听，避免重复触发排版
});

方案2：缩放容器替代resize（完全保留原有排版位置） #

如果需要严格保留初始加载的分页、文字位置，不要调用rendition.resize()，改为给渲染容器加CSS缩放，既留出侧边栏空间，又不会触发epubjs重新排版：

/* 无侧边栏时的容器样式 */
.reader-container {
  width: 100%;
  height: 100vh;
  transition: transform 0.3s ease;
  transform-origin: left center;
}
/* 打开侧边栏时的容器样式 */
.reader-container.has-sidebar {
  transform: scale(0.8);
  margin-right: -20%; /* 抵消缩放产生的右侧空白占位 */
}

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