Google Chrome下拉弹出菜单显示异常故障排查咨询

该异常是Chrome 119及以上版本合入W3C标准对齐补丁导致的兼容性问题，并非代码逻辑错误：

• 按照W3C正式规范，若父元素存在transform/filter/will-change: transform/contain: paint等会创建独立层叠上下文的属性，其内部position: fixed的元素应当相对于该父元素计算位置，而非相对于浏览器视口。
• 此前Chrome长期未实现该标准规则，fixed元素始终相对于视口定位，大量旧站点基于Chrome的这一非标准行为编写了菜单定位逻辑；近期Chrome更新后修复了该标准偏差，原有定位逻辑就会出现偏移。
• 子菜单背景透明是同版本更新中合成层计算逻辑调整导致的：若子菜单背景挂载在伪元素上、且依赖父元素的opacity过渡值，Chrome会错误地将伪元素初始透明度判定为0，未随主元素同步更新，最终呈现透明效果。
• 其他基于Chromium内核的浏览器暂未合入该标准对齐补丁，因此功能表现正常；故障触发时不涉及JavaScript逻辑执行，因此控制台无任何报错。

• 点击一级下拉菜单后，点击弹出的子菜单项时，子菜单背景偏移至屏幕左侧
• 异常触发时子菜单背景同步变为透明

1. 访问目标站点
2. 点击导航菜单中的「Solutions」按钮
3. 点击下拉菜单中的「Fleet Solutions」按钮即可触发异常

按改造成本从低到高可选以下方案：

• 快速兼容修复：将子菜单容器的position: fixed属性改为position: absolute，同时给子菜单的直接父级下拉容器添加position: relative属性；移除父级容器上多余的transform/will-change: transform类动画属性，将动画效果直接绑定到子菜单自身即可，该方案全浏览器兼容，无额外适配成本。
• 保留fixed定位修复：如果业务场景必须使用position: fixed，可给子菜单元素显式添加transform: translateZ(0)强制开启独立合成层，同时给子菜单背景元素显式设置opacity: 1的初始值，不要依赖父元素的opacity继承，即可规避Chrome合成层计算偏差。
• 版本兜底适配：如果暂时无法调整核心定位逻辑，可针对Chrome 119+版本添加专属样式兜底，示例代码如下：

/* 仅对Chrome 119+版本生效 */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) {
  .sub-menu-wrapper {
    position: absolute !important;
    left: 0 !important;
  }
  .sub-menu-background {
    opacity: 1 !important;
    /* 替换为站点实际使用的子菜单背景色值 */
    background: #ffffff !important;
  }
}

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