bug (mat-button-toggle-group and mat-button-toggle): styling issue with border gaps when zoomed in

[samosuki]

Steps to Reproduce

Use Google Chrome or Microsoft Edge

1. Navigate to Button Toggle Overview Page - https://material.angular.io/components/button-toggle/overview

2. Select Bold, Italic or Underline button under Basic button-toggles.

3. Zoom to 125%, 150 or 175%.

4. Gaps exist between the edges of the selected button and the border of the group button.

Expected Behaviour

There should be no gaps between the edges of the selected button and the border.

Actual Behaviour

Gaps exist between the edges of the selected button and the border of the group button.

Behaviour is seen on Chrome and Edge, but the expected behaviour occurs on Firefox.

Environment

• Angular: 12, 8
• Browser(s): Chrome, Edge
• Operating System: Windows

Screenshots

Microsoft Edge at zoom 150%

Google Chrome at zoom 125%

Firefox at zoom 150% (Expected behaviour)

[crisbeto]

I can reproduce it too and I've spent some time trying to fix it, but the only way seems to be to move the border from the button group to the individual toggles which makes the styles much messier.