Microsoft Edge下滚动条临界显示时jQuery动画引发整页抖动问题

• 预期实现效果：搭建整页铺满图片的展示页面，在图片上层叠加白色div元素，绑定交互逻辑为鼠标悬停div时元素尺寸放大，鼠标移出时缩回原始大小。该效果在Chrome、Safari、Firefox浏览器中运行正常。
• Edge浏览器异常表现：拖拽调整浏览器窗口至特定尺寸时（页面滚动条处于即将触发但未正常渲染的异常浅灰色状态），鼠标只要悬停在目标div上，整页就会持续抖动，初步判断异常来源于浏览器反复调整滚动条状态形成的循环。
• 复现参考信息：
  • 效果复现演示页面：https://codepen.io/HelenIT/pen/xxEaeJJ
  • 异常滚动条状态截图：https://rmssdstorage.blob.core.windows.net/www/error_1.png

现有实现代码 #

HTML 结构 #

<div>
    <img src="~/Images/test.jpg" style="width:100%; height:auto;" />
    <div class="csTest">
        Hover on me
    </div>
</div>  

CSS 样式 #

.csTest {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 200px;
    left: 200px;
    background-color: white;
}

jQuery 交互逻辑 #

$(".csTest").hover(function () {
    console.log("over");
    $(".csTest").animate(
        {
            height: 200,
            width: 200
        }, 700);
}, function () { //鼠标移出时触发
    console.log("off");
    $(".csTest").animate(
        {
            height: 100,
            width: 100
        }, 700);
});

异常核心成因：当前实现中直接修改元素宽高的动画会触发全页面布局重排，当页面处于滚动条出现/隐藏的临界尺寸时，元素放大撑出的溢出内容会触发滚动条出现，滚动条占位又会让页面可用宽度收缩，反过来改变元素的宽度计算值，再次触发溢出判定，形成无限循环，最终表现为页面持续抖动。
可落地的修复方向：

• 固定滚动条占位，消除临界值循环触发条件
  在全局样式中添加规则，强制浏览器为滚动条预留固定空间，避免滚动条随页面内容尺寸变化反复出现、隐藏：

  html {
      scrollbar-gutter: stable;
  }
  

• 切断元素尺寸变化对文档流的影响
  给图片外层的父容器设置定位上下文与溢出约束，让叠加的div元素尺寸变化时，溢出内容不会传递到页面滚动层：

  /* 图片外层容器补充样式 */
  .image-wrapper {
      position: relative;
      overflow: hidden;
      max-width: 100vw;
  }
  

• 替换动画实现逻辑，避免触发布局重排
  把直接修改元素宽高的动画逻辑，替换为基于transform的缩放效果。transform属性的变更不会触发文档流重排，从根源上避免尺寸变化带来的页面溢出问题：
  对应的样式补充：

  .csTest {
      /* 保留原有定位、尺寸、背景色样式 */
      transform-origin: top left;
      will-change: transform;
  }
  

  对应的交互逻辑调整：

  $(".csTest").hover(function () {
      $(this).stop().animate({
          transform: "scale(2)"
      }, 700);
  }, function () {
      $(this).stop().animate({
          transform: "scale(1)"
      }, 700);
  });
  

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