Chrome版本从114升级到115后，弹出窗口错位了

Question

我的 Angular 12 应用程序之一遇到问题，我们在多个页面上显示弹出窗口，并且随着 Chrome v115 更新，它被放错了位置。 为了显示弹出窗口，我们使用 Popper.js 和 ngx-popper 库。

以下是用于设置弹出窗口样式的代码（更新方法）。

<div #internal="popper" [popper]="content" [popperTrigger]="'none'" [popperPlacement]="placement"
  [popperHideOnClickOutside]="popperHideOnClickOutside" [popperPositionFixed]="true" [popperTarget]="target"
  [popperHideOnScroll]="popperHideOnScroll" [popperModifiers]="{preventOverflow: {boundariesElement: 'viewport'}, computeStyle: {enabled: true, fn: update.bind(this) }, flip: { enabled: allowFlip, behavior: ['left', 'bottom', 'top',
 'right'], boundariesElement: 'viewport' } }" [popperAppendTo]="appendTo" (popperOnShown)="onShown($event)"
  (popperOnHidden)="onHide($event)" (hideOnClickOutside)="onClickOutside($event)">

  <popper-content #content class="casa-popover" [class.casa-popover-append-to]="appendTo"
    [class.ml20-when-x-placement-right]="worksAsRibbonInPatientCaseSelector">
    <ng-content select=".header" #header></ng-content>
    <ng-scrollbar [trackX]="false" [trackY]="true" [disabled]="true">
      <ng-content select="[body]"></ng-content>
    </ng-scrollbar>
    <ng-content select=".footer"></ng-content>
  </popper-content>

</div>

有趣的部分是，当我在更新方法上放置调试器时，我得到了正确的坐标，并且弹出窗口在正确的区域中打开。 以下是不同浏览器和版本的截图。

Chrome v115

边缘 v115

Chrome v114

Answer 1

以下 CSS 对我有用。 将此类添加到您的 popper css/scss 文件中，并在所有位置添加 .ngxp__container 类样式。

popper-content {
    .ngxp__container {
        display: block!important;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;

        &[aria-hidden="true"] {
            visibility: hidden;
        }
    }
}