Popover border overlaps arrow when placement is top in some resolutions

[josuf107]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

This is similar to https://github.com/twbs/bootstrap/issues/38200, but I opened a new ticket since it's somewhat more urgent. I noticed that the popover border overlaps the arrow on my wide monitors at work and at home, though it works correctly on my macbook built-in display. My home monitor is set to 1920x1080. Scaling to 960x540 causes the issue to resolve.

I have a different laptop running ArchLinux with Wayland compositor. I attached this machine to the same monitor, and the issue did not appear in my chromium browser. Just mentioning as it seems like it's not necessarily just the resolution or monitor. Though the issue appears in the more normal configuration using the macbook. Unfortunately I don't have other devices around for testing.

Attached screenshot of the defect:

Reduced test cases

Visit https://getbootstrap.com/docs/5.3/components/popovers/#four-directions and click the Popover on Top button on a display set to resolution 1920 x 1080, connected to a macbook pro.

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.2

[Durgeshhirani]

I have tried in macOS external display set to 1920x1080 chrome with version 5.3.2 but not it's not overlapping for me. Have you tried anything else ?