滚动至typed.js span元素后容器高度变化的原因咨询

我研究这个问题好一阵子了，始终没搞清楚根源：当页面滚动到使用typed.js渲染的<span>元素之后，容器会莫名其妙地向下展开，但页面处于顶部位置时完全不会出现这个异常。

我整理了一个极简的复现示例，核心代码结构如下：

<!-- 顶部占位内容，让页面可滚动 -->
<div class="top-placeholder">
  <p>占位文本</p>
  <p>占位文本</p>
  <p>占位文本</p>
  <!-- 重复足够多的占位行，确保页面能滚动到下方容器 -->
</div>

<!-- 出现问题的目标容器 -->
<div class="target-container">
  <h3>示例标题 <span id="typed-target"></span></h3>
</div>

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
  // 初始化typed.js
  const typedInstance = new Typed('#typed-target', {
    strings: ['测试内容', '滚动异常演示'],
    typeSpeed: 50,
    backSpeed: 30,
    loop: true
  });
</script>

<style>
  .target-container {
    border: 1px solid #3498db;
    padding: 1.2rem;
    margin: 0 auto;
    width: 80%;
  }
</style>

具体现象 #

• 页面处于顶部时，target-container的高度完全正常，边框包裹的范围符合预期
• 当滚动到target-container进入可视区域后，等待typed.js完成一轮打字/回退动画，容器会突然向下撑开，导致页面布局出现跳动

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