Pop up window is misplaced after upgrading Chrome version from 114 to 115

Question

I have an issue with one of our Angular 12 application, where we show popup window on several pages and with Chrome v115 update it is getting misplaced. To show the pop-ups we use Popper.js and ngx-popper libraries.

Following is the code which is used for setting the styles for the popup window (update method).

<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>

The interesting part is when I put a debugger on the update method, I get correct coordinates and the popup opens in a right area. Below are the screenshots from different browsers and versions.

Chrome v115

Edge v115

Chrome v114

Answer 1

Following CSS worked for me. Add this class to your popper css/scss file and add .ngxp__container class styles in all places where it exist.

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

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