如何修复侧边栏定时刷新多尺寸广告引发的内容跳动问题

问题描述 #

我在网站侧边栏配置了每30秒自动刷新的广告，目前侧边栏内容会出现无规律的跳动偏移，我录制了演示视频可以直观展示具体现象。
目前接入的广告单元尺寸规格为：250250、300250、336*280。
我当前的实现代码如下：

.aspect-ratio-box::before {
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-top: 591.44px / 1127.34px * 100%;
}
.aspect-ratio-box::after { 
  content: "";
  display: table;
  clear: both;
}

<div class="aspect-ratio-box">
  <div style="border:1px solid black;width: 300px;">
    <center>
      <div id='xxxxxxxxxxx'>
        <script>
          googletag.cmd.push(function() { googletag.display('xxxxxxxxxxx'); });
        </script>
      </div>
    </center>
    <br/>
    <center>
      <div id='xxxxxxxxxxx'>
        <script>
          googletag.cmd.push(function() { googletag.display('xxxxxxxxxxx'); });
        </script>
      </div>
    </center>
  </div>
</div>

目前我已经搭建了可复现问题的测试页面，请问有什么可行方案可以修复跳动问题，让侧边栏内容不再发生偏移？ #

修复方案 #

跳动本质上是广告刷新的流程缺陷导致的：常规自动刷新逻辑会先把上一轮的旧广告DOM完全移除，再拉取新广告、等广告代码渲染出实际尺寸后才插入页面。这个空窗期里，广告容器没有任何内容支撑，高度会直接坍塌，下方的侧边栏内容就会向上滑动；等新广告渲染完成、撑起来容器高度，内容又被挤回原位，就形成了肉眼可见的跳动偏移。
可以按以下步骤调整，从根源上解决问题：

• 给广告外层容器定死固定最小高度
  统计你接入的所有广告尺寸的最大占用总高度，给外层带黑边框的容器设置固定min-height，完全覆盖最高广告场景下的总高度，避免容器高度临时坍塌。
  按目前的广告尺寸计算：单块最高广告高度为280px，两块广告总高度560px，加上中间<br/>的默认高度、上下边框的2px，总固定高度设为578px即可，额外给容器加overflow: hidden防止高度溢出，完全替换你原来的aspect-ratio占位逻辑：

  .ad-outer-container {
    width: 300px;
    min-height: 578px;
    border: 1px solid black;
    overflow: hidden;
  }
  

• 调整广告刷新的DOM更新流程
  修改自动刷新的逻辑，不要先移除旧广告再加载新广告，改成先在后台拉取新广告代码、等新广告完全渲染出实际尺寸后，再平滑替换旧广告内容，全程保持外层容器的高度不变，避免出现空窗期。
• 替换不兼容的居中方案
  移除代码里的<center>标签，改用flex布局实现广告块居中，避免内容尺寸变化时产生的左右偏移：

  .ad-unit {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 280px; /* 单块广告的固定最小高度，匹配最高广告尺寸 */
  }
  

• 原来用的浮动伪元素aspect-ratio占位方案，本身需要精准计算容器的宽高比例，计算误差很容易导致占位高度和实际广告高度不匹配，反而加重跳动问题，用固定最小高度的方案更直接稳定，不需要反复调整比例参数。

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