Chrome下flex-direction:column-reverse搭配固定背景图异常解决方案问询

下面是3种经过验证可解决该Chromium内核bug的方案，均不影响Firefox下的正常表现：

方案1：替换column-reverse实现逻辑 #

该bug由flex-direction: column-reverse与background-attachment: fixed的渲染逻辑冲突触发，你可以保留flex布局，将flex方向改回默认的column，再通过order属性实现子元素逆序，效果和原column-reverse完全一致：

/* 原有容器样式 */
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

/* 修改后的容器样式 */
.flex-container {
  display: flex;
  flex-direction: column;
}
/* 子元素统一设置order实现逆序 */
.flex-container > * {
  order: -1;
}

如果子元素本身已有自定义order值，按逆序规则重新分配order数值即可。

方案2：替换固定背景实现方式 #

如果不能修改flex容器的方向配置，可以放弃background-attachment: fixed，改用固定定位的伪元素承载背景图，视觉效果完全一致：

/* 子元素原有固定背景样式 */
.flex-child {
  background: url("背景图地址") center/cover no-repeat fixed;
}

/* 修改后的样式 */
.flex-child {
  position: relative;
  overflow: hidden;
}
.flex-child::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("背景图地址") center/cover no-repeat;
}

方案3：小成本强制触发GPU渲染 #

如果前两种方案改动成本过高，你可以直接给flex容器添加transform: translateZ(0)属性，触发GPU加速渲染绕开该2D渲染路径bug：

.flex-container {
  transform: translateZ(0);
}

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