将Chrome版本从114升级到115后,弹出窗口位置错误

a11xaf1n  于 2023-08-01  发布在  Go
关注(0)|答案(1)|浏览(135)

我对我们的一个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>

字符串
有趣的是,当我在update方法上放置一个调试器时,我得到了正确的坐标,弹出窗口在正确的区域打开。下面是来自不同浏览器和版本的屏幕截图。
Chrome v115

边缘v115

Chrome v114

fhity93d

fhity93d1#

CSS为我工作。将此类添加到popper css/scss文件中,并在所有位置添加.ngxp__容器类样式。

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

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

字符串

相关问题