OverlayPanel: Incorrect position when inside of dialog in 16.0.0 (did not happen in rc2)

[gabboman]

Describe the bug

The overlay panel does not go to the correct place with the latest stable version. This issue did not happen in the RC2.

I attach screenshot of the issue:

Expected behaivour (screenshot taken with RC2)

Current behaivour with 16.0.0

This issue is more than a visual annoyance in mobile devices: in my iphone SE 2020 (iphone 8 screen basically) does not even appears.

Environment

This is my package json
{
"name": "wafrn",
"version": "0.0.2",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"dev:ssr": "ng run wafrn:serve-ssr",
"serve:ssr": "node dist/wafrn/server/main.js",
"build:ssr": "ng build && ng run wafrn:server",
"prerender": "ng run wafrn:prerender",
"vercel-build": "npm run build:ssr"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.0.0",
"@angular/cdk": "^16.0.0",
"@angular/common": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/elements": "^16.0.0",
"@angular/forms": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/platform-server": "^16.0.0",
"@angular/router": "^16.0.0",
"@typescript-eslint/parser": "^5.9.1",
"core-js": "^3.25.3",
"eslint": "^8.7.0",
"eslint-config-google": "^0.14.0",
"ngx-quill": "^22.0.0",
"notosans-fontface": "^1.3.0",
"primeflex": "^3.3.0",
"primeicons": "^6.0.1",
"primeng": "^16.0.0",
"quill-mention": "^3.1.0",
"rxjs": "^7.8.1",
"sanitize-html": "^2.10.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.0",
"@angular/cli": "16.0.0",
"@angular/compiler-cli": "^16.0.0",
"@types/express": "^4.17.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^18.14.1",
"@types/quill": "^1.3.10",
"@types/sanitize-html": "^2.6.2",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"jasmine-core": "~3.10.0",
"karma": "~6.3.14",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"prettier": "^2.5.1",
"tslib": "^2.4.0",
"typescript": "~5.0.4"
}
}

Reproducer

No response

Angular version

16.0.0

PrimeNG version

16.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.14.1

Browser(s)

No response

Steps to reproduce the behavior

Put something on a dialog, add overlay panel to it. display overlay panel.

Overlay panel appears on wrong position

Expected behavior

to happen like in the RC version. This issue is a regression

[dougmbarcellos]

Try this workaround:

appendTo="body"

[gabboman]

Hello @dougmbarcellos it works after adding this. Is this a regression or is it an issue on my side?

[dougmbarcellos]

Hello @dougmbarcellos it works after adding this. Is this a regression or is it an issue on my side?

It's a problem in primeng.

The solution is from the following comment #13191 (comment)