Firefox部分设备Flex容器末端出现无DOM关联伪影问题求助

问题场景 #

在部分设备的Firefox浏览器中，用于实现键值对（标签居左、值居右）布局的Flex容器末端会出现无法在开发者工具中选中、无对应DOM元素的伪影。该问题在本地设备无法复现，但多台其他设备可稳定重现。相关代码如下：

CSS代码 #

.itempage-page-wrapper .section .item[data-v-214933a8] {
  padding: 12px 0;
  display: flex;
}

.itempage-page-wrapper .section .item[data-v-214933a8]:not(:last-child) {
  border-bottom: 1px solid #DFDFDF;
}

.itempage-page-wrapper .section .item .label[data-v-214933a8] {
  white-space: nowrap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #777778;
  min-width: 128px;
  text-transform: capitalize;
}

.itempage-page-wrapper .section .item .value[data-v-214933a8] {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #0C0C0C;
  text-align: right;
  margin-left: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

HTML代码 #

<div class="itempage-page-wrapper">
  <div class="section">
    <div data-v-214933a8="" class="item">
      <div data-v-214933a8="" class="label">collection</div>
      <div data-v-214933a8="" class="value">sqdfqsdf</div>
    </div>
  </div>
</div>

解决方案 #

这类伪影属于Firefox特定环境下的渲染精度bug（如亚像素计算误差、Flex布局渲染偏差、字体溢出等），可尝试以下几种修复方案：

方案1：隐藏容器溢出 #

给Flex容器添加overflow: hidden，强制截断可能的渲染溢出伪影：

.itempage-page-wrapper .section .item[data-v-214933a8] {
  padding: 12px 0;
  display: flex;
  overflow: hidden; /* 添加该行 */
}

方案2：触发硬件加速 #

通过transform: translateZ(0)触发GPU硬件加速，修正渲染异常：

.itempage-page-wrapper .section .item[data-v-214933a8] {
  padding: 12px 0;
  display: flex;
  transform: translateZ(0); /* 添加该行 */
}

方案3：统一容器边框渲染 #

原代码中仅非最后一个item有底部边框，可能导致容器高度计算出现小数像素，改为给所有item添加边框后移除最后一个的边框，统一渲染逻辑：

.itempage-page-wrapper .section .item[data-v-214933a8] {
  padding: 12px 0;
  display: flex;
  border-bottom: 1px solid #DFDFDF; /* 默认添加边框 */
}
.itempage-page-wrapper .section .item:last-child[data-v-214933a8] {
  border-bottom: none; /* 最后一个移除边框 */
}

方案4：明确容器宽度 #

确保Flex容器占满父元素宽度，避免布局计算偏差：

.itempage-page-wrapper .section .item[data-v-214933a8] {
  padding: 12px 0;
  display: flex;
  width: 100%; /* 添加该行 */
}

内容的提问来源于stack exchange，提问作者Kaki Master Of Time