如何修复 iframe 内容导致父容器意外跳动的问题

当 iframe 使用高倍缩放（如 scale(0.6)）配合大尺寸（170%）和负位移时，其原始内容高度会超出父容器视口，触发浏览器重排与滚动锚点偏移，造成视觉“跳动”；调整 iframe 尺寸至 160%~165% 可在保留所有关键样式（包括 padding-top: 60px 和 transform）的前提下彻底解决该问题。

当 iframe 使用高倍缩放（如 scale(0.6)）配合大尺寸（170%）和负位移时，其原始内容高度会超出父容器视口，触发浏览器重排与滚动锚点偏移，造成视觉“跳动”；调整 iframe 尺寸至 160%~165% 可在保留所有关键样式（包括 padding-top: 60px 和 transform）的前提下彻底解决该问题。

这个问题看似反直觉——iframe 内容本应被隔离，却能影响父级布局。根本原因在于：CSS transform 不改变文档流，但 iframe 的原始尺寸（width: 170%; height: 170%）仍参与父容器的溢出计算与滚动上下文判定。即使视觉上被缩放并位移，浏览器仍按缩放前的尺寸评估是否触发滚动条、是否影响 overflow: hidden 的裁剪边界，进而引发重排抖动或视口锚点偏移（尤其在 iframe 加载完成、内容高度动态变化时）。

✅ 正确解决方案是微调 iframe 的原始尺寸，而非移除 transform 或修改 padding：

._inner_frame_ {
  margin: 0;
  width: 165%;     /* 原 170% → 调整为 165% */
  height: 165%;    /* 同步调整高度，保持比例一致 */
  transform: scale(0.6) translate(-33.5%, -33.5%);
  padding: 0;
  overflow: hidden;
  left: 0;
  position: absolute;
  background-color: red;
}

? 为什么是 160%–165%？

• scale(0.6) 理论上将 165% 缩放后等效于 165% × 0.6 ≈ 99%，接近 100% 宽高，恰好填满父容器可视区域，避免因超量溢出触发 overflow: hidden 的隐式裁剪偏移；
• 若仍轻微跳动，可进一步降至 162% 或 160%（推荐从 165% 开始测试）；
• ⚠️ 切勿仅改 width 不改 height，否则缩放后比例失衡，导致内容拉伸或留白。

? 补充建议：

• 为 iframe 显式设置 border: none; 和 display: block;，消除默认内联元素基线间隙；
• 若 iframe 来源支持，可在加载完成后通过 postMessage 通知父页动态调整尺寸（进阶可控方案）；
• 避免在 .outer_ 上使用 padding-top: 60px 同时又依赖绝对定位——确保其 top: 90px 与 padding-top 逻辑不冲突（当前结构合理，无需改动）。

该修复完全兼容你提出的所有约束：padding-top: 60px 保留、transform 不变、布局结构零侵入，是符合 CSS 渲染规范的精准解法。