Popover arrow doesn't match the header background if placement is bottom

[xvaara]

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

Popover arrow doesn't match the header background if placement is bottom.

There is a potential fix using variables:

.bs-popover-auto[data-popper-placement^='bottom'] .popover-arrow:has(+ .popover-header)::after,
.bs-popover-bottom .popover-arrow:has(+ .popover-header)::after {
  --bs-popover-bg: var(--bs-popover-header-bg);
}

Reduced test cases

https://stackblitz.com/edit/wb5ais?file=index.html

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

macOS

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

No response

What version of Bootstrap are you using?

5.3

[julien-deramond]

Good catch, @xvaara—thanks for reporting this issue! Your workaround looks promising at first glance, especially in terms of rendering. It makes sense that it would work that way. I see that it relies on :has, which Bootstrap doesn’t support yet. Let's explore what we can do in a PR to address this!

Edit: see https://github.com/twbs/bootstrap/pull/40994