Outlined button groups

[SPodjasek]

Current implementation with negative margin sometimes renders badly - in my case on HiDPI displays. Some borders between buttons are visible as double width, maybe it's an issue with chrome but disabling left-side border on not-first elements solves this issue and probably won't break rendering in other cases.

Current implementation

bootstrap/scss/_button-group.scss

Lines 36 to 43 in ea4da49

	.btn-group {
	@include border-radius($btn-border-radius);
	// Prevent double borders when buttons are next to each other
	> :not(.btn-check:first-child) + .btn,
	> .btn-group:not(:first-child) {
	margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
	}

looks like this:

After applying this hotfix:

.btn-group {
  // Prevent double borders when buttons are next to each other
  > :not(.btn-check:first-child) + .btn,
  > .btn-group:not(:first-child) {
    border-left: 0;
  }
}

Maybe it's worth implementing?

[julien-deramond]

Thanks for suggesting a hotfix @SPodjasek.
Would you be able to create a CodePen (or anything in the same spirit) containing the code used to render your example?
I'd like to reproduce the double-border thing by testing it with different combinations of OSs and browsers and try your patch.
Or maybe you've seen it as well in our documentation?

[SPodjasek]

I do see this in current documentation - https://getbootstrap.com/docs/5.3/components/button-group/

[SPodjasek]

It seems to be Chrome only, here's a screenshot from Firefox on the same machine

My version of Chrome is 113.0.5672.63 and Firefox is 112.0.2

[SPodjasek]

I've found the root cause of this edge-case behavior. It only happens when you enable font scaling in system properties with non-integer values. In my case, I use Ubuntu 23.04 with Chrome on a 4K display, and my font scaling was 1,2x. It looks as it should when I set scaling to 1,0x or 2,0x. Also, it seems that Firefox doesn't respect system-wide font scaling.

[julien-deramond]

Haven't had the time to look at it precisely yet but your feedback is very interesting here. Based on this observation, do you think the patch suggested in the main comment of this discussion is still valid?

[SPodjasek]

IMHO disabling this border instead of moving margin 'back' by width of border gives the same visual result, and properly handles this rare edge-case that I've encountered.

I don't know the reasoning behind currently implemented solution and because of that I wanted to start this as a discussion and not an issue.

[julien-deramond]

I've not checked all the renderings that could be impacted by such a modification, but here's a slight discrepancy that I can observe for example. I don't have the history of this specific change but I suppose that it can be linked.

Right now, when hovering the last item of https://twbs-bootstrap.netlify.app/docs/5.3/components/button-group/#basic-example:

With the modification, the left border is not displayed (obviously) for the "Middle" and "Right" buttons, contrary to the "Left" button which has a right border displayed. So it breaks the default rendering of Bootstrap and could have an impact as well for customization (to be studied