Chrome/Edge 108版本更新致Bootstrap模态框加载数据异常求助

现象概述 #

Chrome/Edge 108版本更新后，通过AJAX加载分部视图内容到Bootstrap模态框的.modal-body时，页面出现无响应挂起，仅偶尔显示模态框页脚，数据始终无法正常展示；降级浏览器版本或移除.modal-body的margin: auto样式后，问题完全解决。

根源分析 #

Chrome 108对CSS多列布局（column-count/column-width）结合margin: auto的渲染逻辑进行了调整。当动态向同时设置了多列布局和margin: auto的容器内插入大量结构化内容（如分部视图中的多层.row/.col结构）时，浏览器在计算容器尺寸、列分布的重排/重绘过程中出现逻辑冲突，触发了渲染线程的阻塞甚至死循环，最终导致页面无响应。

修复方案 #

方案1：替换margin: auto的居中方式（推荐） #

不要直接给.modal-body设置margin: auto，而是通过内部容器实现内容居中，避免多列布局与margin: auto的冲突：

<div class="modal-content">
  <div class="modal-body" style="column-count: 3; column-width: 100px;">
    <!-- 新增内部容器承载AJAX加载的内容，实现居中 -->
    <div id="modal-content-container" style="margin: auto; max-width: 100%;"></div>
  </div>
  <div class="modal-footer">
    <input type="submit" name="Save" class="btn btn-success" value="Save" />
    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
  </div>
</div>

同时修改JavaScript代码，将内容插入到内部容器：

function documentTypeSelect(id) {
  $.get("/Controller/Method/" + id, function (data) {
    $('#modal-content-container').html(data);
    $("#documentTypeModel").modal("show");
  });
}

方案2：用CSS Grid替代多列布局 #

如果不需要兼容旧浏览器，可以使用CSS Grid实现三列布局，通过justify-content: center天然实现居中，彻底规避多列布局的渲染问题：

<div class="modal-body" style="display: grid; grid-template-columns: repeat(3, 100px); gap: 10px; justify-content: center;">
</div>

方案3：优化AJAX加载时机 #

原代码中先发起AJAX请求，再立即显示模态框，可能导致模态框渲染与内容插入并发执行，加重浏览器负担。将模态框显示逻辑移到AJAX回调内，确保内容插入完成后再触发模态框渲染：

function documentTypeSelect(id) {
  $.get("/Controller/Method/" + id, function (data) {
    $('.modal-body').html(data);
    $("#documentTypeModel").modal("show"); // 移至回调内部
  });
}

验证 #

上述方案修复后，在Chrome/Edge 108+版本测试，模态框可正常加载数据且无页面挂起现象，同时保留原有的布局展示效果。

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