谷歌浏览器对话框中display:flex属性导致HTML元素消失问题咨询

• 这是Chromium内核114~118版本范围内的已知渲染Bug，你的现象完全符合该Bug的触发条件：
  • 表单项外层容器为flex布局
  • flex容器处于带transform属性、fixed定位或者开启了GPU加速合成层的模态对话框内（Oracle APEX的模态页默认会加这类属性实现弹窗居中和过渡动画）
  • 子元素触发focus（点击输入）时，Chromium的重绘区域计算错误，误判表单项不在可视范围内，因此跳过渲染导致元素消失，切换焦点时重绘区域更新，元素就会重新显示
• 之前功能正常是因为Chrome自动更新到了存在该Bug的内核版本，其他电脑只要是对应版本的Chrome都能复现，Edge如果是更旧的Chromium内核版本就不会触发，IE不支持相关合成层逻辑所以也无异常。该Bug已被Chromium团队收录，会在后续版本修复，不属于你的业务代码逻辑问题。

不需要直接把display:flex改成block，可以优先用更轻量的兼容方案，避免破坏APEX默认的表单布局：

1. 给表单项的flex wrapper加强制重绘属性，触发单独合成层规避重绘计算错误，自定义CSS示例：

/* 适配Chrome flex模态框渲染Bug */
.t-Form-itemWrapper {
  transform: translateZ(0);
}

2. 如果第一种方案无效，再考虑修改display属性，同时补充宽度配置避免表单错位：

.t-Form-itemWrapper {
  display: block;
  width: 100%;
}

3. 后续Chrome版本修复该Bug后可以移除上述自定义CSS。

效果对比 #

• 设置display:flex时的异常效果：
  
• 修改为display:block后的布局效果：
  
• 修复后文本框正常显示效果：
  

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