Chrome 111更新后Bootstrap 4.3.1模态框遮罩层覆盖模态框问题求助

环境信息 #

• Chrome版本：Version 111.0.5563.64 (Official Build) (x86_64)
• Bootstrap版本：4.3.1

问题描述 #

Chrome近期更新后，模态框的遮罩层（modal-backdrop）显示在模态框本体前方，导致模态框内容无法交互。已确认不是z-index设置问题（当前遮罩层z-index为1040，模态框z-index为1050）。

相关代码 #

CSS样式 #

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: block;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

HTML结构 #

<div class="modal fade" id="aboutUs" tabindex="-1" role="dialog" aria-labelledby="aboutUsModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ property.othersPopupTitle | translate: langPreference }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <a (click)="tncOnClick()" class="select-wrapper">
                        <label>{{ property.tnc | translate: langPreference }}</label>
                    </a>
                    
                    <a class="select-wrapper" href="{{'tel:'+ contactUs}}" *ngIf="isMobileDevice">
                        <div class="select-icon"></div>
                        <label>{{ property.contactUs | translate: langPreference }}</label>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

解决办法 #

试试以下几个方向：

• 给模态框添加transform: translateZ(0)：强制触发GPU加速，重新建立堆叠上下文，覆盖Chrome的渲染异常：

  .modal {
      transform: translateZ(0);
  }
  

• 检查父元素的overflow设置：如果模态框被嵌套在某个设置了overflow: hidden的父元素里，会破坏fixed定位的堆叠逻辑，找到并移除该设置。

• 调整遮罩层插入位置：Bootstrap默认将遮罩层插入到<body>末尾，与模态框同级。若模态框嵌套在其他带定位/堆叠上下文的元素中，遮罩层层级会受父元素影响，可手动将遮罩层移到模态框父级之外，或直接将模态框挂载在<body>下。

• 升级Bootstrap版本：4.3.1属于较老版本，后续4.x稳定版（如4.6.2）大概率修复了这类Chrome兼容性问题，升级版本可能是最省心的方案。

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