Flexbox在Firefox中异常：DOM重计算导致菜单错位求助

这个问题我之前处理过，本质是Firefox和Chrome对绝对定位元素在flex容器中的渲染逻辑差异导致的：

问题根源 #

你的.meta-menu-top和.meta-menu-bottom都是position: absolute，父容器.meta-container设置了display: flex; justify-content: center。在Chrome中，浏览器会直接按照flex容器的居中规则渲染绝对定位元素；但在Firefox里，绝对定位元素会先默认左对齐（遵循静态定位的初始布局），之后才会应用flex的居中样式，这就造成了视觉上“先被推到左侧，再重新居中”的跳动现象。

修复方案 #

我们可以绕过flex容器的居中，直接给绝对定位的菜单元素设置独立的水平居中方式，这样就能消除浏览器渲染时序差异带来的问题：

修改CSS代码 #

给两个菜单元素添加以下样式：

left: 50%;
transform: translateX(-50%);

修改后的完整菜单CSS代码：

/* menus */
.meta-menu-top {
  background: #252422;
  color: #959595;
  border-radius: 0px 0px 10px 10px;
  position: absolute;
  height: 48%;
  width: 360px;
  opacity: 0.7;
  display: flex;
  justify-content: center;
  /* 新增水平居中样式 */
  left: 50%;
  transform: translateX(-50%);
}
.meta-menu-top ul {
  padding: 0;
  margin-top: 30%;
}
.meta-menu-top li {
  list-style-type: none;
  display: block;
}
.meta-menu-bottom {
  background: #eef1f5;
  color: white;
  border-radius: 10px 10px 0px 0px;
  position: absolute;
  height: 48%;
  width: 360px;
  /* 新增水平居中样式 */
  left: 50%;
  transform: translateX(-50%);
}

同时，父容器的justify-content: center已经不需要了，可以移除：

.meta-container {
  display: flex;
  /* 移除这个属性 */
  /* justify-content: center; */
}

为什么这个方案有效？ #

left: 50%让元素的左边缘对齐容器的水平中点，transform: translateX(-50%)再把元素向左平移自身宽度的一半，这种方式是绝对定位元素水平居中的标准写法，不依赖父容器的flex布局规则。在所有现代浏览器中，这种定位方式的渲染时序是一致的，自然就不会出现Firefox里的跳动问题了。

内容的提问来源于stack exchange，提问作者José Moreira