Firefox下使用angular-modal-service全屏展示图片显示不完整问题

架构老林

2026-10-17

这个兼容问题来源于火狐和Chrome对全屏模态框的渲染规则差异：Chrome会自动对Bootstrap模态框内的图片做尺寸适配，而火狐不会主动计算全屏模态框的可用尺寸，导致图片超出容器视口被截断，可按以下步骤修复：

步骤1：新增CSS兼容规则

给modalImageFullscreen组件的全局样式添加以下规则，强制火狐适配全屏尺寸：

/* 全屏模态框容器适配 */
body.angular-modal-service-active .modal-dialog {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  max-width: unset;
}
body.angular-modal-service-active .modal-content {
  height: 100%;
  overflow: auto;
  background: #000;
  border: none;
  border-radius: 0;
}
/* 图片自适应规则 */
modal-image-fullscreen img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  display: block;
  margin: 2.5vh auto;
}

步骤2：调整模态框初始化逻辑

修改initFullscreenModal方法，在调用modal('show')后主动触发一次重绘，解决火狐首次打开渲染不及时的问题：

public initFullscreenModal = ():ng.IPromise<any> => this.ModalService
            .showModal({
                component: 'modalImageFullscreen',
                bodyClass: 'angular-modal-service-active',
                bindings: {
                    image: this.image
                },
                preClose: (modal: IDavis.Modal, result: any) => {
                    modal.element.modal('hide');
                }
            })
            .then( (modal: IDavis.Modal): void => {
                modal.element.modal('show');
                // 新增火狐兼容：读取offsetWidth触发重排，强制重新计算元素尺寸
                void modal.element[0].offsetWidth;
            })
            .catch( (error: any) => {
               console.error('imageController.initModal().ModalService.showModal().ERROR', error);
            });