Chrome/Edge使用CSS columns多列布局时元素定位异常问题

• Chrome、Edge（Chromium内核版本118及以上）存在CSS多列布局下的渲染兼容问题，三星互联网浏览器无该异常，问题仅在使用column-count/column-width实现的多列布局场景下触发
• 复现场景预期渲染4个独立的悬浮按钮，实际所有绝对定位的按钮都重叠在同一坐标位置，视觉上仅显示1个按钮
• 附加独立异常：特定版本Edge浏览器按F12唤起开发者工具后，右键菜单选择复制CSS规则会直接导致开发者工具窗口关闭，同版本Chrome无该异常

CSS部分 #

.div_columns {
    width:500px;
    column-count: 2;
    column-gap: 20px;
}

.card {
    height: 32px;
    padding: 5px;
    background-color: #f0f0f0;
    margin-bottom: 8px;
}

.div_buttons {
    position: relative;
    height: 34px;
    min-width: 50px;
    float: right;
    text-align: right;
    background-color: #808080;
    padding-top: 18px;
    box-sizing: border-box;
}

.button {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 16px;
    height: 16px;
    background-color: #f3f3f3;  
}

HTML结构部分 #

<div class="div_columns">
  <div class="card"><div class="div_buttons"><div class="button"></div></div></div>
  <div class="card"><div class="div_buttons"><div class="button"></div></div></div>
  <div class="card"><div class="div_buttons"><div class="button"></div></div></div>
  <div class="card"><div class="div_buttons"><div class="button"></div></div></div>
</div>

1. 布局重叠问题属于Chromium内核的渲染回归bug：多列容器内的浮动元素设置position: relative作为绝对定位子元素的包含块时，内核的列分片渲染逻辑错误地将所有这类绝对定位元素的坐标参考系设置为多列容器的第一个列盒，而非元素自身的父级相对定位元素，最终导致所有同结构的绝对定位元素被计算到相同坐标产生重叠。三星互联网使用的定制Chromium内核版本未合入引入该bug的代码变更，因此无法复现。
2. Edge开发者工具复制规则闪退属于Edge浏览器DevTools模块的独立回归bug，由120版本前后的DevTools权限校验逻辑错误引发，和页面渲染问题无关联。

• 布局重叠问题优先修复方案：调整定位包含块层级，给.card类添加position: relative，同时移除.div_buttons上的position: relative属性，让绝对定位的按钮直接以card元素为坐标参考，即可绕过内核的分片坐标计算bug，核心修改代码如下：

.card {
    height: 32px;
    padding: 5px;
    background-color: #f0f0f0;
    margin-bottom: 8px;
    position: relative; /* 新增定位包含块 */
}

.div_buttons {
    /* 移除原position: relative，使用默认static定位即可 */
    height: 34px;
    min-width: 50px;
    float: right;
    text-align: right;
    background-color: #808080;
    padding-top: 18px;
    box-sizing: border-box;
}

• 布局重叠问题临时规避方案：如果不想调整现有定位层级，可给多列容器.div_columns添加transform: translateZ(0)属性触发独立GPU合成层，也能绕过该坐标计算bug，但该方案会额外增加合成层内存开销，不推荐长期使用。
• Edge DevTools闪退问题修复：将Edge浏览器升级到122及以上正式版本即可，微软已在后续迭代中修复该缺陷；升级前临时规避方式为选中CSS规则文本后使用快捷键Ctrl+C复制，不要通过右键菜单触发复制操作，即可避免工具崩溃。

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