Button group dividers have inconsistent thickness or shift horizontally with fractional zoom or DPI scaling

[Hoolean]

Prerequisites

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

Describe the issue

The Bootstrap button component is implemented with overlapping adjacent borders. At fractional zoom levels, or in environments with DPI scaling, these may be rounded differently. This causes both borders to be displayed simultaneously, or for the dividing border to 'shift' horizontally when the active button changes.

Reduced test cases

Effect 1: Double-divider

1. Navigate to the Button Group demonstration in the Bootstrap docs
2. Adopt a fractional zoom level, or other platform-specific DPI scaling
3. At certain zoom levels, the divider between neighbouring buttons is shown doubled:

Effect 2: Horizontal shift

If the test case is modified to add backgrounds to the buttons (shown here crudely), then the divider shifts horizontally depending on which is selected:

<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary bg-white text-primary">Left</button>
  <button type="button" class="btn btn-outline-primary bg-white text-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary bg-white text-primary">Right</button>
</div>

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

Windows

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

Chrome

What version of Bootstrap are you using?

v5.3

[Hoolean]

(hello again! I've updated the issue to include a reproduction and animation showcasing the horizontal shift problem too - thanks for your attention)

[Hoolean]

This appears to originate at the layout stage as opposed to the rasterisation stage, as the border is adopting a fractional value while the negative margin applied to overlap the adjacent borders does not:

With box-sizing: border-box, this is sufficient to offset the element relative to its neighbour.

[Hoolean]

(for example, manually setting margin-left to -0.667 instead stops reproducing the issue at that exact zoom level)

[Hoolean]

The fix for #28940 looks relevant here.

[iDoNotConsentToBeingTracked]

Wow, amazing you caught this and the devs didn't, I wondered for a long time what was going on and you explained it perfectly. I'll be shocked if they actually fix it. Every bootstrap issue I've had I just go in the code and fix myself so I don't have to deal with their arrogance. I feel bad for those who aren't competent enough to do so. You can tell that their passion for bootstrap has withered enormously with their latest weak update in over a year lol.